ToolTip.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. // Tooltip
  2. .@{prefix}-tooltip {
  3. position: absolute;
  4. padding: 5px;
  5. .opacity(0.8);
  6. }
  7. .@{prefix}-tooltip-inner {
  8. font-size: @tooltip-font-size;
  9. background-color: @tooltip-bg;
  10. color: @tooltip-text;
  11. max-width: 200px;
  12. padding: 5px 8px 4px 8px;
  13. text-align: center;
  14. white-space: normal;
  15. }
  16. .@{prefix}-tooltip-inner {
  17. .border-radius(3px);
  18. }
  19. .@{prefix}-tooltip-inner {
  20. .box-shadow(0 0 5px @tooltip-bg);
  21. }
  22. .@{prefix}-tooltip-arrow {
  23. position: absolute;
  24. width: 0;
  25. height: 0;
  26. line-height: 0;
  27. border: 5px dashed @tooltip-bg;
  28. }
  29. .@{prefix}-tooltip-arrow-n {
  30. border-bottom-color: @tooltip-bg;
  31. }
  32. .@{prefix}-tooltip-arrow-s {
  33. border-top-color: @tooltip-bg;
  34. }
  35. .@{prefix}-tooltip-arrow-e {
  36. border-left-color: @tooltip-bg;
  37. }
  38. .@{prefix}-tooltip-arrow-w {
  39. border-right-color: @tooltip-bg;
  40. }
  41. .@{prefix}-tooltip-nw, .@{prefix}-tooltip-sw {
  42. margin-left: -14px;
  43. }
  44. .@{prefix}-tooltip-ne, .@{prefix}-tooltip-se {
  45. margin-left: 14px;
  46. }
  47. .@{prefix}-tooltip-n .@{prefix}-tooltip-arrow {
  48. top: 0px;
  49. left: 50%;
  50. margin-left: -5px;
  51. border-bottom-style: solid;
  52. border-top: none;
  53. border-left-color: transparent;
  54. border-right-color: transparent;
  55. }
  56. .@{prefix}-tooltip-nw .@{prefix}-tooltip-arrow {
  57. top: 0;
  58. left: 10px;
  59. border-bottom-style: solid;
  60. border-top: none;
  61. border-left-color: transparent;
  62. border-right-color: transparent;
  63. }
  64. .@{prefix}-tooltip-ne .@{prefix}-tooltip-arrow {
  65. top: 0;
  66. right: 10px;
  67. border-bottom-style: solid;
  68. border-top: none;
  69. border-left-color: transparent;
  70. border-right-color: transparent;
  71. }
  72. .@{prefix}-tooltip-s .@{prefix}-tooltip-arrow {
  73. bottom: 0;
  74. left: 50%;
  75. margin-left: -5px;
  76. border-top-style: solid;
  77. border-bottom: none;
  78. border-left-color: transparent;
  79. border-right-color: transparent;
  80. }
  81. .@{prefix}-tooltip-sw .@{prefix}-tooltip-arrow {
  82. bottom: 0;
  83. left: 10px;
  84. border-top-style: solid;
  85. border-bottom: none;
  86. border-left-color: transparent;
  87. border-right-color: transparent;
  88. }
  89. .@{prefix}-tooltip-se .@{prefix}-tooltip-arrow {
  90. bottom: 0;
  91. right: 10px;
  92. border-top-style: solid;
  93. border-bottom: none;
  94. border-left-color: transparent;
  95. border-right-color: transparent;
  96. }
  97. .@{prefix}-tooltip-e .@{prefix}-tooltip-arrow {
  98. right: 0;
  99. top: 50%;
  100. margin-top: -5px;
  101. border-left-style: solid;
  102. border-right: none;
  103. border-top-color: transparent;
  104. border-bottom-color: transparent;
  105. }
  106. .@{prefix}-tooltip-w .@{prefix}-tooltip-arrow {
  107. left: 0;
  108. top: 50%;
  109. margin-top: -5px;
  110. border-right-style: solid;
  111. border-left: none;
  112. border-top-color: transparent;
  113. border-bottom-color: transparent;
  114. }