_tooltip.scss 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. //
  2. // Tooltips
  3. // --------------------------------------------------
  4. // Base class
  5. .tooltip {
  6. position: absolute;
  7. z-index: $zindex-tooltip;
  8. display: block;
  9. visibility: visible;
  10. font-size: $font-size-small;
  11. line-height: 1.4;
  12. @include opacity(0);
  13. &.in { @include opacity($tooltip-opacity); }
  14. &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
  15. &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
  16. &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
  17. &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
  18. }
  19. // Wrapper for the tooltip content
  20. .tooltip-inner {
  21. max-width: $tooltip-max-width;
  22. padding: 3px 8px;
  23. color: $tooltip-color;
  24. text-align: center;
  25. text-decoration: none;
  26. background-color: $tooltip-bg;
  27. border-radius: $border-radius-base;
  28. }
  29. // Arrows
  30. .tooltip-arrow {
  31. position: absolute;
  32. width: 0;
  33. height: 0;
  34. border-color: transparent;
  35. border-style: solid;
  36. }
  37. .tooltip {
  38. &.top .tooltip-arrow {
  39. bottom: 0;
  40. left: 50%;
  41. margin-left: -$tooltip-arrow-width;
  42. border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  43. border-top-color: $tooltip-arrow-color;
  44. }
  45. &.top-left .tooltip-arrow {
  46. bottom: 0;
  47. left: $tooltip-arrow-width;
  48. border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  49. border-top-color: $tooltip-arrow-color;
  50. }
  51. &.top-right .tooltip-arrow {
  52. bottom: 0;
  53. right: $tooltip-arrow-width;
  54. border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  55. border-top-color: $tooltip-arrow-color;
  56. }
  57. &.right .tooltip-arrow {
  58. top: 50%;
  59. left: 0;
  60. margin-top: -$tooltip-arrow-width;
  61. border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
  62. border-right-color: $tooltip-arrow-color;
  63. }
  64. &.left .tooltip-arrow {
  65. top: 50%;
  66. right: 0;
  67. margin-top: -$tooltip-arrow-width;
  68. border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
  69. border-left-color: $tooltip-arrow-color;
  70. }
  71. &.bottom .tooltip-arrow {
  72. top: 0;
  73. left: 50%;
  74. margin-left: -$tooltip-arrow-width;
  75. border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  76. border-bottom-color: $tooltip-arrow-color;
  77. }
  78. &.bottom-left .tooltip-arrow {
  79. top: 0;
  80. left: $tooltip-arrow-width;
  81. border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  82. border-bottom-color: $tooltip-arrow-color;
  83. }
  84. &.bottom-right .tooltip-arrow {
  85. top: 0;
  86. right: $tooltip-arrow-width;
  87. border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  88. border-bottom-color: $tooltip-arrow-color;
  89. }
  90. }