tooltip.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /*!
  2. * Bootstrap v3.3.5 (http://getbootstrap.com)
  3. * Copyright 2011-2015 Twitter, Inc.
  4. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  5. */
  6. .tooltip {
  7. position: absolute;
  8. display: block;
  9. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  10. font-style: normal;
  11. font-weight: normal;
  12. letter-spacing: normal;
  13. line-break: auto;
  14. line-height: 1.42857143;
  15. text-align: left;
  16. text-align: start;
  17. text-decoration: none;
  18. text-shadow: none;
  19. text-transform: none;
  20. white-space: normal;
  21. word-break: normal;
  22. word-spacing: normal;
  23. word-wrap: normal;
  24. font-size: 12px;
  25. opacity: 0;
  26. z-index: 100000;
  27. filter: alpha(opacity = 0);
  28. &.in {
  29. opacity: 0.9;
  30. filter: alpha(opacity = 90);
  31. }
  32. &.top {
  33. margin-top: -3px;
  34. padding: 5px 0;
  35. }
  36. &.right {
  37. margin-left: 3px;
  38. padding: 0 5px;
  39. }
  40. &.bottom {
  41. margin-top: 3px;
  42. padding: 5px 0;
  43. }
  44. &.left {
  45. margin-left: -3px;
  46. padding: 0 5px;
  47. }
  48. }
  49. .tooltip-inner {
  50. max-width: 350px;
  51. padding: 3px 8px;
  52. color: #ffffff;
  53. text-align: center;
  54. background-color: #000000;
  55. border-radius: 4px;
  56. }
  57. .tooltip-arrow {
  58. position: absolute;
  59. width: 0;
  60. height: 0;
  61. border-color: transparent;
  62. border-style: solid;
  63. }
  64. .tooltip {
  65. &.top .tooltip-arrow {
  66. bottom: 0;
  67. left: 50%;
  68. margin-left: -5px;
  69. border-width: 5px 5px 0;
  70. border-top-color: #000000;
  71. }
  72. &.top-left .tooltip-arrow {
  73. bottom: 0;
  74. right: 5px;
  75. margin-bottom: -5px;
  76. border-width: 5px 5px 0;
  77. border-top-color: #000000;
  78. }
  79. &.top-right .tooltip-arrow {
  80. bottom: 0;
  81. left: 5px;
  82. margin-bottom: -5px;
  83. border-width: 5px 5px 0;
  84. border-top-color: #000000;
  85. }
  86. &.right .tooltip-arrow {
  87. top: 50%;
  88. left: 0;
  89. margin-top: -5px;
  90. border-width: 5px 5px 5px 0;
  91. border-right-color: #000000;
  92. }
  93. &.left .tooltip-arrow {
  94. top: 50%;
  95. right: 0;
  96. margin-top: -5px;
  97. border-width: 5px 0 5px 5px;
  98. border-left-color: #000000;
  99. }
  100. &.bottom .tooltip-arrow {
  101. top: 0;
  102. left: 50%;
  103. margin-left: -5px;
  104. border-width: 0 5px 5px;
  105. border-bottom-color: #000000;
  106. }
  107. &.bottom-left .tooltip-arrow {
  108. top: 0;
  109. right: 5px;
  110. margin-top: -5px;
  111. border-width: 0 5px 5px;
  112. border-bottom-color: #000000;
  113. }
  114. &.bottom-right .tooltip-arrow {
  115. top: 0;
  116. left: 5px;
  117. margin-top: -5px;
  118. border-width: 0 5px 5px;
  119. border-bottom-color: #000000;
  120. }
  121. }