1
1

tooltipster.bundle.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  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. }
  204. /**
  205. * DEFAULT STYLE OF THE SIDETIP PLUGIN
  206. *
  207. * All styles are "namespaced" with .tooltipster-sidetip to prevent
  208. * conflicts between plugins.
  209. */
  210. /* .tooltipster-box */
  211. .tooltipster-sidetip .tooltipster-box {
  212. background: #565656;
  213. border: 2px solid black;
  214. border-radius: 4px;
  215. }
  216. .tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
  217. margin-top: 8px;
  218. }
  219. .tooltipster-sidetip.tooltipster-left .tooltipster-box {
  220. margin-right: 8px;
  221. }
  222. .tooltipster-sidetip.tooltipster-right .tooltipster-box {
  223. margin-left: 8px;
  224. }
  225. .tooltipster-sidetip.tooltipster-top .tooltipster-box {
  226. margin-bottom: 8px;
  227. }
  228. /* .tooltipster-content */
  229. .tooltipster-sidetip .tooltipster-content {
  230. color: white;
  231. line-height: 18px;
  232. padding: 6px 14px;
  233. }
  234. /* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that
  235. corresponds to the arrow we want to display */
  236. .tooltipster-sidetip .tooltipster-arrow {
  237. overflow: hidden;
  238. position: absolute;
  239. }
  240. .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
  241. height: 10px;
  242. /* half the width, for centering */
  243. margin-left: -10px;
  244. top: 0;
  245. width: 20px;
  246. }
  247. .tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
  248. height: 20px;
  249. margin-top: -10px;
  250. right: 0;
  251. /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not
  252. been positioned yet */
  253. top: 0;
  254. width: 10px;
  255. }
  256. .tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
  257. height: 20px;
  258. margin-top: -10px;
  259. left: 0;
  260. /* same as .tooltipster-left .tooltipster-arrow */
  261. top: 0;
  262. width: 10px;
  263. }
  264. .tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
  265. bottom: 0;
  266. height: 10px;
  267. margin-left: -10px;
  268. width: 20px;
  269. }
  270. /* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */
  271. .tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
  272. height: 0;
  273. position: absolute;
  274. width: 0;
  275. }
  276. /* .tooltipster-arrow-background */
  277. .tooltipster-sidetip .tooltipster-arrow-background {
  278. border: 10px solid transparent;
  279. }
  280. .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  281. border-bottom-color: #565656;
  282. left: 0;
  283. top: 3px;
  284. }
  285. .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  286. border-left-color: #565656;
  287. left: -3px;
  288. top: 0;
  289. }
  290. .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  291. border-right-color: #565656;
  292. left: 3px;
  293. top: 0;
  294. }
  295. .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  296. border-top-color: #565656;
  297. left: 0;
  298. top: -3px;
  299. }
  300. /* .tooltipster-arrow-border */
  301. .tooltipster-sidetip .tooltipster-arrow-border {
  302. border: 10px solid transparent;
  303. left: 0;
  304. top: 0;
  305. }
  306. .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  307. border-bottom-color: black;
  308. }
  309. .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  310. border-left-color: black;
  311. }
  312. .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  313. border-right-color: black;
  314. }
  315. .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  316. border-top-color: black;
  317. }
  318. /* tooltipster-arrow-uncropped */
  319. .tooltipster-sidetip .tooltipster-arrow-uncropped {
  320. position: relative;
  321. }
  322. .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
  323. top: -10px;
  324. }
  325. .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
  326. left: -10px;
  327. }