dist/css/tooltipster.bundle.css

0001 /* This is the core CSS of Tooltipster */
0002
0003 /* GENERAL STRUCTURE RULES (do not edit this section) */
0004
0005 .tooltipster-base {
0006         /* this ensures that a constrained height set by functionPosition,
0007         if greater that the natural height of the tooltip, will be enforced
0008         in browsers that support display:flex */
0009         display: flex;
0010         pointer-events: none;
0011         /* this may be overriden in JS for fixed position origins */
0012         position: absolute;
0013 }
0014
0015 .tooltipster-box {
0016         /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-
0017         and flex-basis auto for IE11- (at least) */
0018         flex: 1 1 auto;
0019 }
0020
0021 .tooltipster-content {
0022         /* prevents an overflow if the user adds padding to the div */
0023         box-sizing: border-box;
0024         /* these make sure we'll be able to detect any overflow */
0025         max-height: 100%;
0026         max-width: 100%;
0027         overflow: auto;
0028 }
0029
0030 .tooltipster-ruler {
0031         /* these let us test the size of the tooltip without overflowing the window */
0032         bottom: 0;
0033         left: 0;
0034         overflow: hidden;
0035         position: fixed;
0036         right: 0;
0037         top: 0;
0038         visibility: hidden;
0039 }
0040
0041 /* ANIMATIONS */
0042
0043 /* Open/close animations */
0044
0045 /* fade */
0046
0047 .tooltipster-fade {
0048         opacity: 0;
0049         -webkit-transition-property: opacity;
0050         -moz-transition-property: opacity;
0051         -o-transition-property: opacity;
0052         -ms-transition-property: opacity;
0053         transition-property: opacity;
0054 }
0055 .tooltipster-fade.tooltipster-show {
0056         opacity: 1;
0057 }
0058
0059 /* grow */
0060
0061 .tooltipster-grow {
0062         -webkit-transform: scale(0,0);
0063         -moz-transform: scale(0,0);
0064         -o-transform: scale(0,0);
0065         -ms-transform: scale(0,0);
0066         transform: scale(0,0);
0067         -webkit-transition-property: -webkit-transform;
0068         -moz-transition-property: -moz-transform;
0069         -o-transition-property: -o-transform;
0070         -ms-transition-property: -ms-transform;
0071         transition-property: transform;
0072         -webkit-backface-visibility: hidden;
0073 }
0074 .tooltipster-grow.tooltipster-show {
0075         -webkit-transform: scale(1,1);
0076         -moz-transform: scale(1,1);
0077         -o-transform: scale(1,1);
0078         -ms-transform: scale(1,1);
0079         transform: scale(1,1);
0080         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
0081         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0082         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0083         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0084         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0085         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0086 }
0087
0088 /* swing */
0089
0090 .tooltipster-swing {
0091         opacity: 0;
0092         -webkit-transform: rotateZ(4deg);
0093         -moz-transform: rotateZ(4deg);
0094         -o-transform: rotateZ(4deg);
0095         -ms-transform: rotateZ(4deg);
0096         transform: rotateZ(4deg);
0097         -webkit-transition-property: -webkit-transform, opacity;
0098         -moz-transition-property: -moz-transform;
0099         -o-transition-property: -o-transform;
0100         -ms-transition-property: -ms-transform;
0101         transition-property: transform;
0102 }
0103 .tooltipster-swing.tooltipster-show {
0104         opacity: 1;
0105         -webkit-transform: rotateZ(0deg);
0106         -moz-transform: rotateZ(0deg);
0107         -o-transform: rotateZ(0deg);
0108         -ms-transform: rotateZ(0deg);
0109         transform: rotateZ(0deg);
0110         -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
0111         -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
0112         -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
0113         -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
0114         -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
0115         transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
0116 }
0117
0118 /* fall */
0119
0120 .tooltipster-fall {
0121         -webkit-transition-property: top;
0122         -moz-transition-property: top;
0123         -o-transition-property: top;
0124         -ms-transition-property: top;
0125         transition-property: top;
0126         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
0127         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0128         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0129         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0130         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0131         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0132 }
0133 .tooltipster-fall.tooltipster-initial {
0134         top: 0 !important;
0135 }
0136 .tooltipster-fall.tooltipster-show {
0137 }
0138 .tooltipster-fall.tooltipster-dying {
0139         -webkit-transition-property: all;
0140         -moz-transition-property: all;
0141         -o-transition-property: all;
0142         -ms-transition-property: all;
0143         transition-property: all;
0144         top: 0 !important;
0145         opacity: 0;
0146 }
0147
0148 /* slide */
0149
0150 .tooltipster-slide {
0151         -webkit-transition-property: left;
0152         -moz-transition-property: left;
0153         -o-transition-property: left;
0154         -ms-transition-property: left;
0155         transition-property: left;
0156         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
0157         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0158         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0159         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0160         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0161         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
0162 }
0163 .tooltipster-slide.tooltipster-initial {
0164         left: -40px !important;
0165 }
0166 .tooltipster-slide.tooltipster-show {
0167 }
0168 .tooltipster-slide.tooltipster-dying {
0169         -webkit-transition-property: all;
0170         -moz-transition-property: all;
0171         -o-transition-property: all;
0172         -ms-transition-property: all;
0173         transition-property: all;
0174         left: 0 !important;
0175         opacity: 0;
0176 }
0177
0178 /* Update animations */
0179
0180 /* We use animations rather than transitions here because
0181  transition durations may be specified in the style tag due to
0182  animationDuration, and we try to avoid collisions and the use
0183  of !important */
0184
0185 /* fade */
0186
0187 @keyframes tooltipster-fading {
0188         0% {
0189                 opacity: 0;
0190         }
0191         100% {
0192                 opacity: 1;
0193         }
0194 }
0195
0196 .tooltipster-update-fade {
0197         animation: tooltipster-fading 400ms;
0198 }
0199
0200 /* rotate */
0201
0202 @keyframes tooltipster-rotating {
0203         25% {
0204                 transform: rotate(-2deg);
0205         }
0206         75% {
0207                 transform: rotate(2deg);
0208         }
0209         100% {
0210                 transform: rotate(0);
0211         }
0212 }
0213
0214 .tooltipster-update-rotate {
0215         animation: tooltipster-rotating 600ms;
0216 }
0217
0218 /* scale */
0219
0220 @keyframes tooltipster-scaling {
0221         50% {
0222                 transform: scale(1.1);
0223         }
0224         100% {
0225                 transform: scale(1);
0226         }
0227 }
0228
0229 .tooltipster-update-scale {
0230         animation: tooltipster-scaling 600ms;
0231 }
0232
0233 /**
0234  * DEFAULT STYLE OF THE SIDETIP PLUGIN
0235  *
0236  * All styles are "namespaced" with .tooltipster-sidetip to prevent
0237  * conflicts between plugins.
0238  */
0239
0240 /* .tooltipster-box */
0241
0242 .tooltipster-sidetip .tooltipster-box {
0243         background: #565656;
0244         border: 2px solid black;
0245         border-radius: 4px;
0246 }
0247
0248 .tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
0249         margin-top: 8px;
0250 }
0251
0252 .tooltipster-sidetip.tooltipster-left .tooltipster-box {
0253         margin-right: 8px;
0254 }
0255
0256 .tooltipster-sidetip.tooltipster-right .tooltipster-box {
0257         margin-left: 8px;
0258 }
0259
0260 .tooltipster-sidetip.tooltipster-top .tooltipster-box {
0261         margin-bottom: 8px;
0262 }
0263
0264 /* .tooltipster-content */
0265
0266 .tooltipster-sidetip .tooltipster-content {
0267         color: white;
0268         line-height: 18px;
0269         padding: 6px 14px;
0270 }
0271
0272 /* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that
0273 corresponds to the arrow we want to display */
0274
0275 .tooltipster-sidetip .tooltipster-arrow {
0276         overflow: hidden;
0277         position: absolute;
0278 }
0279
0280 .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
0281         height: 10px;
0282         /* half the width, for centering */
0283         margin-left: -10px;
0284         top: 0;
0285         width: 20px;
0286 }
0287
0288 .tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
0289         height: 20px;
0290         margin-top: -10px;
0291         right: 0;
0292         /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not
0293         been positioned yet */
0294         top: 0;
0295         width: 10px;
0296 }
0297
0298 .tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
0299         height: 20px;
0300         margin-top: -10px;
0301         left: 0;
0302         /* same as .tooltipster-left .tooltipster-arrow */
0303         top: 0;
0304         width: 10px;
0305 }
0306
0307 .tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
0308         bottom: 0;
0309         height: 10px;
0310         margin-left: -10px;
0311         width: 20px;
0312 }
0313
0314 /* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */
0315
0316 .tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
0317         height: 0;
0318         position: absolute;
0319         width: 0;
0320 }
0321
0322 /* .tooltipster-arrow-background */
0323
0324 .tooltipster-sidetip .tooltipster-arrow-background {
0325         border: 10px solid transparent;
0326 }
0327
0328 .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
0329         border-bottom-color: #565656;
0330         left: 0;
0331         top: 3px;
0332 }
0333
0334 .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
0335         border-left-color: #565656;
0336         left: -3px;
0337         top: 0;
0338 }
0339
0340 .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
0341         border-right-color: #565656;
0342         left: 3px;
0343         top: 0;
0344 }
0345
0346 .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
0347         border-top-color: #565656;
0348         left: 0;
0349         top: -3px;
0350 }
0351
0352 /* .tooltipster-arrow-border */
0353
0354 .tooltipster-sidetip .tooltipster-arrow-border {
0355         border: 10px solid transparent;
0356         left: 0;
0357         top: 0;
0358 }
0359
0360 .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
0361         border-bottom-color: black;
0362 }
0363
0364 .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
0365         border-left-color: black;
0366 }
0367
0368 .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
0369         border-right-color: black;
0370 }
0371
0372 .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
0373         border-top-color: black;
0374 }
0375
0376 /* tooltipster-arrow-uncropped */
0377
0378 .tooltipster-sidetip .tooltipster-arrow-uncropped {
0379         position: relative;
0380 }
0381
0382 .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
0383         top: -10px;
0384 }
0385
0386 .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
0387         left: -10px;
0388 }