tooltip.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
  4. * @copyright Copyright (c) 2016, Jan-Christoph Borchardt <hey@jancborchardt.net>
  5. * @copyright Copyright (c) 2016, Erik Pellikka <erik@pellikka.org>
  6. * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
  7. *
  8. * Bootstrap v3.3.5 (http://getbootstrap.com)
  9. * Copyright 2011-2015 Twitter, Inc.
  10. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  11. */
  12. .tooltip {
  13. position: absolute;
  14. display: block;
  15. font-family: var(--font-face);
  16. font-style: normal;
  17. font-weight: normal;
  18. letter-spacing: normal;
  19. line-break: auto;
  20. line-height: 1.6;
  21. text-align: left;
  22. text-align: start;
  23. text-decoration: none;
  24. text-shadow: none;
  25. text-transform: none;
  26. white-space: normal;
  27. word-break: normal;
  28. word-spacing: normal;
  29. word-wrap: normal;
  30. overflow-wrap: anywhere;
  31. font-size: 12px;
  32. opacity: 0;
  33. z-index: 100000;
  34. /* default to top */
  35. margin-top: -3px;
  36. padding: 10px 0;
  37. filter: drop-shadow(0 1px 10px var(--color-box-shadow));
  38. &.in,
  39. &.show,
  40. &.tooltip[aria-hidden='false'] {
  41. visibility: visible;
  42. opacity: 1;
  43. transition: opacity .15s;
  44. }
  45. &.top .tooltip-arrow,
  46. &[x-placement^='top'] {
  47. left: 50%;
  48. margin-left: -10px;
  49. }
  50. &.bottom,
  51. &[x-placement^='bottom'] {
  52. margin-top: 3px;
  53. padding: 10px 0;
  54. }
  55. &.right,
  56. &[x-placement^='right'] {
  57. margin-left: 3px;
  58. padding: 0 10px;
  59. .tooltip-arrow {
  60. top: 50%;
  61. left: 0;
  62. margin-top: -10px;
  63. border-width: 10px 10px 10px 0;
  64. border-right-color: var(--color-main-background);
  65. }
  66. }
  67. &.left,
  68. &[x-placement^='left'] {
  69. margin-left: -3px;
  70. padding: 0 5px;
  71. .tooltip-arrow {
  72. top: 50%;
  73. right: 0;
  74. margin-top: -10px;
  75. border-width: 10px 0 10px 10px;
  76. border-left-color: var(--color-main-background);
  77. }
  78. }
  79. /* TOP */
  80. &.top,
  81. &.top-left,
  82. &[x-placement^='top'],
  83. &.top-right {
  84. .tooltip-arrow, .arrow {
  85. bottom: 0;
  86. border-width: 10px 10px 0;
  87. border-top-color: var(--color-main-background);
  88. }
  89. }
  90. &.top-left .tooltip-arrow {
  91. right: 10px;
  92. margin-bottom: -10px;
  93. }
  94. &.top-right .tooltip-arrow {
  95. left: 10px;
  96. margin-bottom: -10px;
  97. }
  98. /* BOTTOM */
  99. &.bottom,
  100. &[x-placement^='bottom'],
  101. &.bottom-left,
  102. &.bottom-right {
  103. .tooltip-arrow, .arrow {
  104. top: 0;
  105. border-width: 0 10px 10px;
  106. border-bottom-color: var(--color-main-background);
  107. }
  108. }
  109. &[x-placement^='bottom'] .tooltip-arrow,
  110. &.bottom .tooltip-arrow {
  111. left: 50%;
  112. margin-left: -10px;
  113. }
  114. &.bottom-left .tooltip-arrow {
  115. right: 10px;
  116. margin-top: -10px;
  117. }
  118. &.bottom-right .tooltip-arrow {
  119. left: 10px;
  120. margin-top: -10px;
  121. }
  122. }
  123. .tooltip-inner {
  124. max-width: 350px;
  125. padding: 5px 8px;
  126. background-color: var(--color-main-background);
  127. color: var(--color-main-text);
  128. text-align: center;
  129. border-radius: var(--border-radius);
  130. }
  131. .tooltip-arrow, .tooltip .arrow {
  132. position: absolute;
  133. width: 0;
  134. height: 0;
  135. border-color: transparent;
  136. border-style: solid;
  137. }