_tooltip.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. // Base class
  2. .tooltip {
  3. position: absolute;
  4. z-index: $zindex-tooltip;
  5. display: block;
  6. margin: $tooltip-margin;
  7. // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
  8. // So reset our font and text properties to avoid inheriting weird values.
  9. @include reset-text();
  10. @include font-size($tooltip-font-size);
  11. // Allow breaking very long words so they don't overflow the tooltip's bounds
  12. word-wrap: break-word;
  13. opacity: 0;
  14. &.show { opacity: $tooltip-opacity; }
  15. .arrow {
  16. position: absolute;
  17. display: block;
  18. width: $tooltip-arrow-width;
  19. height: $tooltip-arrow-height;
  20. &::before {
  21. position: absolute;
  22. content: "";
  23. border-color: transparent;
  24. border-style: solid;
  25. }
  26. }
  27. }
  28. .bs-tooltip-top {
  29. padding: $tooltip-arrow-height 0;
  30. .arrow {
  31. bottom: 0;
  32. &::before {
  33. top: 0;
  34. border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
  35. border-top-color: $tooltip-arrow-color;
  36. }
  37. }
  38. }
  39. .bs-tooltip-right {
  40. padding: 0 $tooltip-arrow-height;
  41. .arrow {
  42. left: 0;
  43. width: $tooltip-arrow-height;
  44. height: $tooltip-arrow-width;
  45. &::before {
  46. right: 0;
  47. border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
  48. border-right-color: $tooltip-arrow-color;
  49. }
  50. }
  51. }
  52. .bs-tooltip-bottom {
  53. padding: $tooltip-arrow-height 0;
  54. .arrow {
  55. top: 0;
  56. &::before {
  57. bottom: 0;
  58. border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
  59. border-bottom-color: $tooltip-arrow-color;
  60. }
  61. }
  62. }
  63. .bs-tooltip-left {
  64. padding: 0 $tooltip-arrow-height;
  65. .arrow {
  66. right: 0;
  67. width: $tooltip-arrow-height;
  68. height: $tooltip-arrow-width;
  69. &::before {
  70. left: 0;
  71. border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
  72. border-left-color: $tooltip-arrow-color;
  73. }
  74. }
  75. }
  76. .bs-tooltip-auto {
  77. &[x-placement^="top"] {
  78. @extend .bs-tooltip-top;
  79. }
  80. &[x-placement^="right"] {
  81. @extend .bs-tooltip-right;
  82. }
  83. &[x-placement^="bottom"] {
  84. @extend .bs-tooltip-bottom;
  85. }
  86. &[x-placement^="left"] {
  87. @extend .bs-tooltip-left;
  88. }
  89. }
  90. // Wrapper for the tooltip content
  91. .tooltip-inner {
  92. max-width: $tooltip-max-width;
  93. padding: $tooltip-padding-y $tooltip-padding-x;
  94. color: $tooltip-color;
  95. text-align: center;
  96. background-color: $tooltip-bg;
  97. @include border-radius($tooltip-border-radius);
  98. }