1/* 2 * qTip2 - Pretty powerful tooltips - v2.1.1 3 * http://qtip2.com 4 * 5 * Copyright (c) 2013 Craig Michael Thompson 6 * Released under the MIT, GPL licenses 7 * http://jquery.org/license 8 * 9 * Date: Thu Jul 11 2013 02:15 UTC+0000 10 * Plugins: tips viewport 11 * Styles: basic css3 12 */ 13.qtip{ 14 position: absolute; 15 left: -28000px; 16 top: -28000px; 17 display: none; 18 19 max-width: 280px; 20 min-width: 50px; 21 22 font-size: 10.5px; 23 line-height: 12px; 24 25 direction: ltr; 26 27 box-shadow: none; 28 padding: 0; 29} 30 31 .qtip-content{ 32 position: relative; 33 padding: 5px 9px; 34 overflow: hidden; 35 36 text-align: left; 37 word-wrap: break-word; 38 } 39 40 .qtip-titlebar{ 41 position: relative; 42 padding: 5px 35px 5px 10px; 43 overflow: hidden; 44 45 border-width: 0 0 1px; 46 font-weight: bold; 47 } 48 49 .qtip-titlebar + .qtip-content{ border-top-width: 0 !important; } 50 51 /* Default close button class */ 52 .qtip-close{ 53 position: absolute; 54 right: -9px; top: -9px; 55 56 cursor: pointer; 57 outline: medium none; 58 59 border-width: 1px; 60 border-style: solid; 61 border-color: transparent; 62 } 63 64 .qtip-titlebar .qtip-close{ 65 right: 4px; top: 50%; 66 margin-top: -9px; 67 } 68 69 * html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */ 70 71 .qtip-titlebar .ui-icon, 72 .qtip-icon .ui-icon{ 73 display: block; 74 text-indent: -1000em; 75 direction: ltr; 76 } 77 78 .qtip-icon, .qtip-icon .ui-icon{ 79 -moz-border-radius: 3px; 80 -webkit-border-radius: 3px; 81 border-radius: 3px; 82 text-decoration: none; 83 } 84 85 .qtip-icon .ui-icon{ 86 width: 18px; 87 height: 14px; 88 89 line-height: 14px; 90 text-align: center; 91 text-indent: 0; 92 font: normal bold 10px/13px Tahoma,sans-serif; 93 94 color: inherit; 95 background: transparent none no-repeat -100em -100em; 96 } 97 98/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */ 99.qtip-focus{} 100 101/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */ 102.qtip-hover{} 103 104/* Default tooltip style */ 105.qtip-default{ 106 border-width: 1px; 107 border-style: solid; 108 border-color: #F1D031; 109 110 background-color: #FFFFA3; 111 color: #555; 112} 113 114 .qtip-default .qtip-titlebar{ 115 background-color: #FFEF93; 116 } 117 118 .qtip-default .qtip-icon{ 119 border-color: #CCC; 120 background: #F1F1F1; 121 color: #777; 122 } 123 124 .qtip-default .qtip-titlebar .qtip-close{ 125 border-color: #AAA; 126 color: #111; 127 } 128 129 130 131/*! Light tooltip style */ 132.qtip-light{ 133 background-color: white; 134 border-color: #E2E2E2; 135 color: #454545; 136} 137 138 .qtip-light .qtip-titlebar{ 139 background-color: #f1f1f1; 140 } 141 142 143/*! Dark tooltip style */ 144.qtip-dark{ 145 background-color: #505050; 146 border-color: #303030; 147 color: #f3f3f3; 148} 149 150 .qtip-dark .qtip-titlebar{ 151 background-color: #404040; 152 } 153 154 .qtip-dark .qtip-icon{ 155 border-color: #444; 156 } 157 158 .qtip-dark .qtip-titlebar .ui-state-hover{ 159 border-color: #303030; 160 } 161 162 163/*! Cream tooltip style */ 164.qtip-cream{ 165 background-color: #FBF7AA; 166 border-color: #F9E98E; 167 color: #A27D35; 168} 169 170 .qtip-cream .qtip-titlebar{ 171 background-color: #F0DE7D; 172 } 173 174 .qtip-cream .qtip-close .qtip-icon{ 175 background-position: -82px 0; 176 } 177 178 179/*! Red tooltip style */ 180.qtip-red{ 181 background-color: #F78B83; 182 border-color: #D95252; 183 color: #912323; 184} 185 186 .qtip-red .qtip-titlebar{ 187 background-color: #F06D65; 188 } 189 190 .qtip-red .qtip-close .qtip-icon{ 191 background-position: -102px 0; 192 } 193 194 .qtip-red .qtip-icon{ 195 border-color: #D95252; 196 } 197 198 .qtip-red .qtip-titlebar .ui-state-hover{ 199 border-color: #D95252; 200 } 201 202 203/*! Green tooltip style */ 204.qtip-green{ 205 background-color: #CAED9E; 206 border-color: #90D93F; 207 color: #3F6219; 208} 209 210 .qtip-green .qtip-titlebar{ 211 background-color: #B0DE78; 212 } 213 214 .qtip-green .qtip-close .qtip-icon{ 215 background-position: -42px 0; 216 } 217 218 219/*! Blue tooltip style */ 220.qtip-blue{ 221 background-color: #E5F6FE; 222 border-color: #ADD9ED; 223 color: #5E99BD; 224} 225 226 .qtip-blue .qtip-titlebar{ 227 background-color: #D0E9F5; 228 } 229 230 .qtip-blue .qtip-close .qtip-icon{ 231 background-position: -2px 0; 232 } 233 234 235 236.qtip-shadow{ 237 -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); 238 -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); 239 box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); 240} 241 242/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */ 243.qtip-rounded, 244.qtip-tipsy, 245.qtip-bootstrap{ 246 -moz-border-radius: 5px; 247 -webkit-border-radius: 5px; 248 border-radius: 5px; 249} 250 251.qtip-rounded .qtip-titlebar{ 252 -moz-border-radius: 4px 4px 0 0; 253 -webkit-border-radius: 4px 4px 0 0; 254 border-radius: 4px 4px 0 0; 255} 256 257/* Youtube tooltip style */ 258.qtip-youtube{ 259 -moz-border-radius: 2px; 260 -webkit-border-radius: 2px; 261 border-radius: 2px; 262 263 -webkit-box-shadow: 0 0 3px #333; 264 -moz-box-shadow: 0 0 3px #333; 265 box-shadow: 0 0 3px #333; 266 267 color: white; 268 border-width: 0; 269 270 background: #4A4A4A; 271 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black)); 272 background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%); 273 background-image: -moz-linear-gradient(top,#4A4A4A 0,black 100%); 274 background-image: -ms-linear-gradient(top,#4A4A4A 0,black 100%); 275 background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%); 276} 277 278 .qtip-youtube .qtip-titlebar{ 279 background-color: #4A4A4A; 280 background-color: rgba(0,0,0,0); 281 } 282 283 .qtip-youtube .qtip-content{ 284 padding: .75em; 285 font: 12px arial,sans-serif; 286 287 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000); 288 -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"; 289 } 290 291 .qtip-youtube .qtip-icon{ 292 border-color: #222; 293 } 294 295 .qtip-youtube .qtip-titlebar .ui-state-hover{ 296 border-color: #303030; 297 } 298 299 300/* jQuery TOOLS Tooltip style */ 301.qtip-jtools{ 302 background: #232323; 303 background: rgba(0, 0, 0, 0.7); 304 background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323)); 305 background-image: -moz-linear-gradient(top, #717171, #232323); 306 background-image: -webkit-linear-gradient(top, #717171, #232323); 307 background-image: -ms-linear-gradient(top, #717171, #232323); 308 background-image: -o-linear-gradient(top, #717171, #232323); 309 310 border: 2px solid #ddd; 311 border: 2px solid rgba(241,241,241,1); 312 313 -moz-border-radius: 2px; 314 -webkit-border-radius: 2px; 315 border-radius: 2px; 316 317 -webkit-box-shadow: 0 0 12px #333; 318 -moz-box-shadow: 0 0 12px #333; 319 box-shadow: 0 0 12px #333; 320} 321 322 /* IE Specific */ 323 .qtip-jtools .qtip-titlebar{ 324 background-color: transparent; 325 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A); 326 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"; 327 } 328 .qtip-jtools .qtip-content{ 329 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323); 330 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"; 331 } 332 333 .qtip-jtools .qtip-titlebar, 334 .qtip-jtools .qtip-content{ 335 background: transparent; 336 color: white; 337 border: 0 dashed transparent; 338 } 339 340 .qtip-jtools .qtip-icon{ 341 border-color: #555; 342 } 343 344 .qtip-jtools .qtip-titlebar .ui-state-hover{ 345 border-color: #333; 346 } 347 348 349/* Cluetip style */ 350.qtip-cluetip{ 351 -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4); 352 -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4); 353 box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4); 354 355 background-color: #D9D9C2; 356 color: #111; 357 border: 0 dashed transparent; 358} 359 360 .qtip-cluetip .qtip-titlebar{ 361 background-color: #87876A; 362 color: white; 363 border: 0 dashed transparent; 364 } 365 366 .qtip-cluetip .qtip-icon{ 367 border-color: #808064; 368 } 369 370 .qtip-cluetip .qtip-titlebar .ui-state-hover{ 371 border-color: #696952; 372 color: #696952; 373 } 374 375 376/* Tipsy style */ 377.qtip-tipsy{ 378 background: black; 379 background: rgba(0, 0, 0, .87); 380 381 color: white; 382 border: 0 solid transparent; 383 384 font-size: 11px; 385 font-family: 'Lucida Grande', sans-serif; 386 font-weight: bold; 387 line-height: 16px; 388 text-shadow: 0 1px black; 389} 390 391 .qtip-tipsy .qtip-titlebar{ 392 padding: 6px 35px 0 10px; 393 background-color: transparent; 394 } 395 396 .qtip-tipsy .qtip-content{ 397 padding: 6px 10px; 398 } 399 400 .qtip-tipsy .qtip-icon{ 401 border-color: #222; 402 text-shadow: none; 403 } 404 405 .qtip-tipsy .qtip-titlebar .ui-state-hover{ 406 border-color: #303030; 407 } 408 409 410/* Tipped style */ 411.qtip-tipped{ 412 border: 3px solid #959FA9; 413 414 -moz-border-radius: 3px; 415 -webkit-border-radius: 3px; 416 border-radius: 3px; 417 418 background-color: #F9F9F9; 419 color: #454545; 420 421 font-weight: normal; 422 font-family: serif; 423 424 font-size: 12px; 425} 426 427 .qtip-tipped .qtip-titlebar{ 428 border-bottom-width: 0; 429 430 color: white; 431 background: #3A79B8; 432 background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D)); 433 background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D); 434 background-image: -moz-linear-gradient(top, #3A79B8, #2E629D); 435 background-image: -ms-linear-gradient(top, #3A79B8, #2E629D); 436 background-image: -o-linear-gradient(top, #3A79B8, #2E629D); 437 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D); 438 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"; 439 440 font-size: 14px; 441 } 442 443 .qtip-tipped .qtip-icon{ 444 border: 2px solid #285589; 445 background: #285589; 446 } 447 448 .qtip-tipped .qtip-icon .ui-icon{ 449 background-color: #FBFBFB; 450 color: #555; 451 } 452 453 454/** 455 * Twitter Bootstrap style. 456 * 457 * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11. 458 * Does not work with IE 7. 459 */ 460.qtip-bootstrap{ 461 /** Taken from Bootstrap body */ 462 font-size: 14px; 463 line-height: 20px; 464 color: #333333; 465 466 /** Taken from Bootstrap .popover */ 467 padding: 1px; 468 background-color: #ffffff; 469 border: 1px solid #ccc; 470 border: 1px solid rgba(0, 0, 0, 0.2); 471 -webkit-border-radius: 6px; 472 -moz-border-radius: 6px; 473 border-radius: 6px; 474 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 475 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 476 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 477 -webkit-background-clip: padding-box; 478 -moz-background-clip: padding; 479 background-clip: padding-box; 480} 481 482 .qtip-bootstrap .qtip-titlebar{ 483 /** Taken from Bootstrap .popover-title */ 484 padding: 8px 14px; 485 margin: 0; 486 font-size: 14px; 487 font-weight: normal; 488 line-height: 18px; 489 background-color: #f7f7f7; 490 border-bottom: 1px solid #ebebeb; 491 -webkit-border-radius: 5px 5px 0 0; 492 -moz-border-radius: 5px 5px 0 0; 493 border-radius: 5px 5px 0 0; 494 } 495 496 .qtip-bootstrap .qtip-titlebar .qtip-close{ 497 /** 498 * Overrides qTip2: 499 * .qtip-titlebar .qtip-close{ 500 * [...] 501 * right: 4px; 502 * top: 50%; 503 * [...] 504 * border-style: solid; 505 * } 506 */ 507 right: 11px; 508 top: 45%; 509 border-style: none; 510 } 511 512 .qtip-bootstrap .qtip-content{ 513 /** Taken from Bootstrap .popover-content */ 514 padding: 9px 14px; 515 } 516 517 .qtip-bootstrap .qtip-icon{ 518 /** 519 * Overrides qTip2: 520 * .qtip-default .qtip-icon { 521 * border-color: #CCC; 522 * background: #F1F1F1; 523 * color: #777; 524 * } 525 */ 526 background: transparent; 527 } 528 529 .qtip-bootstrap .qtip-icon .ui-icon{ 530 /** 531 * Overrides qTip2: 532 * .qtip-icon .ui-icon{ 533 * width: 18px; 534 * height: 14px; 535 * } 536 */ 537 width: auto; 538 height: auto; 539 540 /* Taken from Bootstrap .close */ 541 float: right; 542 font-size: 20px; 543 font-weight: bold; 544 line-height: 18px; 545 color: #000000; 546 text-shadow: 0 1px 0 #ffffff; 547 opacity: 0.2; 548 filter: alpha(opacity=20); 549 } 550 551 .qtip-bootstrap .qtip-icon .ui-icon:hover{ 552 /* Taken from Bootstrap .close:hover */ 553 color: #000000; 554 text-decoration: none; 555 cursor: pointer; 556 opacity: 0.4; 557 filter: alpha(opacity=40); 558 } 559 560 561/* IE9 fix - removes all filters */ 562.qtip:not(.ie9haxors) div.qtip-content, 563.qtip:not(.ie9haxors) div.qtip-titlebar{ 564 filter: none; 565 -ms-filter: none; 566} 567 568 569 570.qtip .qtip-tip{ 571 margin: 0 auto; 572 overflow: hidden; 573 z-index: 10; 574 575} 576 577 /* Opera bug #357 - Incorrect tip position 578 https://github.com/Craga89/qTip2/issues/367 */ 579 x:-o-prefocus, .qtip .qtip-tip{ 580 visibility: hidden; 581 } 582 583 .qtip .qtip-tip, 584 .qtip .qtip-tip .qtip-vml, 585 .qtip .qtip-tip canvas{ 586 position: absolute; 587 588 color: #123456; 589 background: transparent; 590 border: 0 dashed transparent; 591 } 592 593 .qtip .qtip-tip canvas{ top: 0; left: 0; } 594 595 .qtip .qtip-tip .qtip-vml{ 596 behavior: url(#default#VML); 597 display: inline-block; 598 visibility: visible; 599 } 600