tooltipster.main.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /* This is the core CSS of Tooltipster */
  2. /* GENERAL STRUCTURE RULES (do not edit this section) */
  3. .tooltipster-base {
  4. /* this ensures that a constrained height set by functionPosition,
  5. if greater that the natural height of the tooltip, will be enforced
  6. in browsers that support display:flex */
  7. display: flex;
  8. pointer-events: none;
  9. /* this may be overriden in JS for fixed position origins */
  10. position: absolute;
  11. }
  12. .tooltipster-box {
  13. /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-
  14. and flex-basis auto for IE11- (at least) */
  15. flex: 1 1 auto;
  16. }
  17. .tooltipster-content {
  18. /* prevents an overflow if the user adds padding to the div */
  19. box-sizing: border-box;
  20. /* these make sure we'll be able to detect any overflow */
  21. max-height: 100%;
  22. max-width: 100%;
  23. overflow: auto;
  24. }
  25. .tooltipster-ruler {
  26. /* these let us test the size of the tooltip without overflowing the window */
  27. bottom: 0;
  28. left: 0;
  29. overflow: hidden;
  30. position: fixed;
  31. right: 0;
  32. top: 0;
  33. visibility: hidden;
  34. }
  35. /* ANIMATIONS */
  36. /* Open/close animations */
  37. /* fade */
  38. .tooltipster-fade {
  39. opacity: 0;
  40. -webkit-transition-property: opacity;
  41. -moz-transition-property: opacity;
  42. -o-transition-property: opacity;
  43. -ms-transition-property: opacity;
  44. transition-property: opacity;
  45. }
  46. .tooltipster-fade.tooltipster-show {
  47. opacity: 1;
  48. }
  49. /* grow */
  50. .tooltipster-grow {
  51. -webkit-transform: scale(0,0);
  52. -moz-transform: scale(0,0);
  53. -o-transform: scale(0,0);
  54. -ms-transform: scale(0,0);
  55. transform: scale(0,0);
  56. -webkit-transition-property: -webkit-transform;
  57. -moz-transition-property: -moz-transform;
  58. -o-transition-property: -o-transform;
  59. -ms-transition-property: -ms-transform;
  60. transition-property: transform;
  61. -webkit-backface-visibility: hidden;
  62. }
  63. .tooltipster-grow.tooltipster-show {
  64. -webkit-transform: scale(1,1);
  65. -moz-transform: scale(1,1);
  66. -o-transform: scale(1,1);
  67. -ms-transform: scale(1,1);
  68. transform: scale(1,1);
  69. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  70. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  71. -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  72. -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  73. -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  74. transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  75. }
  76. /* swing */
  77. .tooltipster-swing {
  78. opacity: 0;
  79. -webkit-transform: rotateZ(4deg);
  80. -moz-transform: rotateZ(4deg);
  81. -o-transform: rotateZ(4deg);
  82. -ms-transform: rotateZ(4deg);
  83. transform: rotateZ(4deg);
  84. -webkit-transition-property: -webkit-transform, opacity;
  85. -moz-transition-property: -moz-transform;
  86. -o-transition-property: -o-transform;
  87. -ms-transition-property: -ms-transform;
  88. transition-property: transform;
  89. }
  90. .tooltipster-swing.tooltipster-show {
  91. opacity: 1;
  92. -webkit-transform: rotateZ(0deg);
  93. -moz-transform: rotateZ(0deg);
  94. -o-transform: rotateZ(0deg);
  95. -ms-transform: rotateZ(0deg);
  96. transform: rotateZ(0deg);
  97. -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
  98. -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
  99. -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
  100. -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
  101. -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
  102. transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
  103. }
  104. /* fall */
  105. .tooltipster-fall {
  106. -webkit-transition-property: top;
  107. -moz-transition-property: top;
  108. -o-transition-property: top;
  109. -ms-transition-property: top;
  110. transition-property: top;
  111. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  112. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  113. -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  114. -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  115. -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  116. transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  117. }
  118. .tooltipster-fall.tooltipster-initial {
  119. top: 0 !important;
  120. }
  121. .tooltipster-fall.tooltipster-show {
  122. }
  123. .tooltipster-fall.tooltipster-dying {
  124. -webkit-transition-property: all;
  125. -moz-transition-property: all;
  126. -o-transition-property: all;
  127. -ms-transition-property: all;
  128. transition-property: all;
  129. top: 0 !important;
  130. opacity: 0;
  131. }
  132. /* slide */
  133. .tooltipster-slide {
  134. -webkit-transition-property: left;
  135. -moz-transition-property: left;
  136. -o-transition-property: left;
  137. -ms-transition-property: left;
  138. transition-property: left;
  139. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  140. -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  141. -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  142. -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  143. -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  144. transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
  145. }
  146. .tooltipster-slide.tooltipster-initial {
  147. left: -40px !important;
  148. }
  149. .tooltipster-slide.tooltipster-show {
  150. }
  151. .tooltipster-slide.tooltipster-dying {
  152. -webkit-transition-property: all;
  153. -moz-transition-property: all;
  154. -o-transition-property: all;
  155. -ms-transition-property: all;
  156. transition-property: all;
  157. left: 0 !important;
  158. opacity: 0;
  159. }
  160. /* Update animations */
  161. /* We use animations rather than transitions here because
  162. transition durations may be specified in the style tag due to
  163. animationDuration, and we try to avoid collisions and the use
  164. of !important */
  165. /* fade */
  166. @keyframes tooltipster-fading {
  167. 0% {
  168. opacity: 0;
  169. }
  170. 100% {
  171. opacity: 1;
  172. }
  173. }
  174. .tooltipster-update-fade {
  175. animation: tooltipster-fading 400ms;
  176. }
  177. /* rotate */
  178. @keyframes tooltipster-rotating {
  179. 25% {
  180. transform: rotate(-2deg);
  181. }
  182. 75% {
  183. transform: rotate(2deg);
  184. }
  185. 100% {
  186. transform: rotate(0);
  187. }
  188. }
  189. .tooltipster-update-rotate {
  190. animation: tooltipster-rotating 600ms;
  191. }
  192. /* scale */
  193. @keyframes tooltipster-scaling {
  194. 50% {
  195. transform: scale(1.1);
  196. }
  197. 100% {
  198. transform: scale(1);
  199. }
  200. }
  201. .tooltipster-update-scale {
  202. animation: tooltipster-scaling 600ms;
  203. }