Keine Beschreibung http://j1x-huginn.herokuapp.com

_tooltip.scss 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. }