You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

86 lines
2.1 KiB

  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. opacity: 0;
  11. &.in { opacity: $tooltip-opacity; }
  12. &.tooltip-top,
  13. &.bs-tether-element-attached-bottom {
  14. padding: $tooltip-arrow-width 0;
  15. margin-top: -3px;
  16. .tooltip-arrow {
  17. bottom: 0;
  18. left: 50%;
  19. margin-left: -$tooltip-arrow-width;
  20. border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
  21. border-top-color: $tooltip-arrow-color;
  22. }
  23. }
  24. &.tooltip-right,
  25. &.bs-tether-element-attached-left {
  26. padding: 0 $tooltip-arrow-width;
  27. margin-left: 3px;
  28. .tooltip-arrow {
  29. top: 50%;
  30. left: 0;
  31. margin-top: -$tooltip-arrow-width;
  32. border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
  33. border-right-color: $tooltip-arrow-color;
  34. }
  35. }
  36. &.tooltip-bottom,
  37. &.bs-tether-element-attached-top {
  38. padding: $tooltip-arrow-width 0;
  39. margin-top: 3px;
  40. .tooltip-arrow {
  41. top: 0;
  42. left: 50%;
  43. margin-left: -$tooltip-arrow-width;
  44. border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
  45. border-bottom-color: $tooltip-arrow-color;
  46. }
  47. }
  48. &.tooltip-left,
  49. &.bs-tether-element-attached-right {
  50. padding: 0 $tooltip-arrow-width;
  51. margin-left: -3px;
  52. .tooltip-arrow {
  53. top: 50%;
  54. right: 0;
  55. margin-top: -$tooltip-arrow-width;
  56. border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
  57. border-left-color: $tooltip-arrow-color;
  58. }
  59. }
  60. }
  61. // Wrapper for the tooltip content
  62. .tooltip-inner {
  63. max-width: $tooltip-max-width;
  64. padding: 3px 8px;
  65. color: $tooltip-color;
  66. text-align: center;
  67. background-color: $tooltip-bg;
  68. @include border-radius($border-radius);
  69. }
  70. // Arrows
  71. .tooltip-arrow {
  72. position: absolute;
  73. width: 0;
  74. height: 0;
  75. border-color: transparent;
  76. border-style: solid;
  77. }