_tooltip.scss 2.4 KB

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