css/tooltipster.css

   1 /* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
   2 .tooltipster-default {
   3         border-radius: 5px;
   4         border: 2px solid #000;
   5         background: #4c4c4c;
   6         color: #fff;
   7 }
   8
   9 /* Use this next selector to style things like font-size and line-height: */
  10 .tooltipster-default .tooltipster-content {
  11         font-family: Arial, sans-serif;
  12         font-size: 14px;
  13         line-height: 16px;
  14         padding: 8px 10px;
  15         overflow: hidden;
  16 }
  17
  18 /* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
  19 .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
  20         /* border-color: ... !important; */
  21 }
  22
  23
  24 /* If you're using the icon option, use this next selector to style them */
  25 .tooltipster-icon {
  26         cursor: help;
  27         margin-left: 4px;
  28 }
  29
  30
  31
  32
  33
  34
  35
  36
  37 /* This is the base styling required to make all Tooltipsters work */
  38 .tooltipster-base {
  39         padding: 0;
  40         font-size: 0;
  41         line-height: 0;
  42         position: absolute;
  43         left: 0;
  44         top: 0;
  45         z-index: 9999999;
  46         pointer-events: none;
  47         width: auto;
  48         overflow: visible;
  49 }
  50 .tooltipster-base .tooltipster-content {
  51         overflow: hidden;
  52 }
  53
  54
  55 /* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
  56 .tooltipster-arrow {
  57         display: block;
  58         text-align: center;
  59         width: 100%;
  60         height: 100%;
  61         position: absolute;
  62         top: 0;
  63         left: 0;
  64         z-index: -1;
  65 }
  66 .tooltipster-arrow span, .tooltipster-arrow-border {
  67         display: block;
  68         width: 0;
  69         height: 0;
  70         position: absolute;
  71 }
  72 .tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
  73         border-left: 8px solid transparent !important;
  74         border-right: 8px solid transparent !important;
  75         border-top: 8px solid;
  76         bottom: -7px;
  77 }
  78 .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
  79         border-left: 9px solid transparent !important;
  80         border-right: 9px solid transparent !important;
  81         border-top: 9px solid;
  82         bottom: -7px;
  83 }
  84
  85 .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
  86         border-left: 8px solid transparent !important;
  87         border-right: 8px solid transparent !important;
  88         border-bottom: 8px solid;
  89         top: -7px;
  90 }
  91 .tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  92         border-left: 9px solid transparent !important;
  93         border-right: 9px solid transparent !important;
  94         border-bottom: 9px solid;
  95         top: -7px;
  96 }
  97 .tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
  98         left: 0;
  99         right: 0;
 100         margin: 0 auto;
 101 }
 102 .tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
 103         left: 6px;
 104 }
 105 .tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
 106         left: 5px;
 107 }
 108 .tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
 109         right: 6px;
 110 }
 111 .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
 112         right: 5px;
 113 }
 114 .tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
 115         border-top: 8px solid transparent !important;
 116         border-bottom: 8px solid transparent !important;
 117         border-left: 8px solid;
 118         top: 50%;
 119         margin-top: -7px;
 120         right: -7px;
 121 }
 122 .tooltipster-arrow-left .tooltipster-arrow-border {
 123         border-top: 9px solid transparent !important;
 124         border-bottom: 9px solid transparent !important;
 125         border-left: 9px solid;
 126         margin-top: -8px;
 127 }
 128 .tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
 129         border-top: 8px solid transparent !important;
 130         border-bottom: 8px solid transparent !important;
 131         border-right: 8px solid;
 132         top: 50%;
 133         margin-top: -7px;
 134         left: -7px;
 135 }
 136 .tooltipster-arrow-right .tooltipster-arrow-border {
 137         border-top: 9px solid transparent !important;
 138         border-bottom: 9px solid transparent !important;
 139         border-right: 9px solid;
 140         margin-top: -8px;
 141 }
 142
 143
 144 /* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
 145
 146 .tooltipster-fade {
 147         opacity: 0;
 148         -webkit-transition-property: opacity;
 149         -moz-transition-property: opacity;
 150         -o-transition-property: opacity;
 151         -ms-transition-property: opacity;
 152         transition-property: opacity;
 153 }
 154 .tooltipster-fade-show {
 155         opacity: 1;
 156 }
 157
 158 .tooltipster-grow {
 159         -webkit-transform: scale(0,0);
 160         -moz-transform: scale(0,0);
 161         -o-transform: scale(0,0);
 162         -ms-transform: scale(0,0);
 163         transform: scale(0,0);
 164         -webkit-transition-property: -webkit-transform;
 165         -moz-transition-property: -moz-transform;
 166         -o-transition-property: -o-transform;
 167         -ms-transition-property: -ms-transform;
 168         transition-property: transform;
 169         -webkit-backface-visibility: hidden;
 170 }
 171 .tooltipster-grow-show {
 172         -webkit-transform: scale(1,1);
 173         -moz-transform: scale(1,1);
 174         -o-transform: scale(1,1);
 175         -ms-transform: scale(1,1);
 176         transform: scale(1,1);
 177         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 178         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 179         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 180         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 181         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 182         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 183 }
 184
 185 .tooltipster-swing {
 186         opacity: 0;
 187         -webkit-transform: rotateZ(4deg);
 188         -moz-transform: rotateZ(4deg);
 189         -o-transform: rotateZ(4deg);
 190         -ms-transform: rotateZ(4deg);
 191         transform: rotateZ(4deg);
 192         -webkit-transition-property: -webkit-transform, opacity;
 193         -moz-transition-property: -moz-transform;
 194         -o-transition-property: -o-transform;
 195         -ms-transition-property: -ms-transform;
 196         transition-property: transform;
 197 }
 198 .tooltipster-swing-show {
 199         opacity: 1;
 200         -webkit-transform: rotateZ(0deg);
 201         -moz-transform: rotateZ(0deg);
 202         -o-transform: rotateZ(0deg);
 203         -ms-transform: rotateZ(0deg);
 204         transform: rotateZ(0deg);
 205         -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
 206         -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 207         -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 208         -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 209         -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 210         transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
 211 }
 212
 213 .tooltipster-fall {
 214         top: 0;
 215         -webkit-transition-property: top;
 216         -moz-transition-property: top;
 217         -o-transition-property: top;
 218         -ms-transition-property: top;
 219         transition-property: top;
 220         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 221         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 222         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 223         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 224         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 225         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 226 }
 227 .tooltipster-fall-show {
 228 }
 229 .tooltipster-fall.tooltipster-dying {
 230         -webkit-transition-property: all;
 231         -moz-transition-property: all;
 232         -o-transition-property: all;
 233         -ms-transition-property: all;
 234         transition-property: all;
 235         top: 0px !important;
 236         opacity: 0;
 237 }
 238
 239 .tooltipster-slide {
 240         left: -40px;
 241         -webkit-transition-property: left;
 242         -moz-transition-property: left;
 243         -o-transition-property: left;
 244         -ms-transition-property: left;
 245         transition-property: left;
 246         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 247         -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 248         -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 249         -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 250         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 251         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
 252 }
 253 .tooltipster-slide.tooltipster-slide-show {
 254 }
 255 .tooltipster-slide.tooltipster-dying {
 256         -webkit-transition-property: all;
 257         -moz-transition-property: all;
 258         -o-transition-property: all;
 259         -ms-transition-property: all;
 260         transition-property: all;
 261         left: 0px !important;
 262         opacity: 0;
 263 }
 264
 265
 266 /* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
 267 .tooltipster-content-changing {
 268         opacity: 0.5;
 269         -webkit-transform: scale(1.1, 1.1);
 270         -moz-transform: scale(1.1, 1.1);
 271         -o-transform: scale(1.1, 1.1);
 272         -ms-transform: scale(1.1, 1.1);
 273         transform: scale(1.1, 1.1);
 274 }