1/* 2 * qTip2 - Pretty powerful tooltips - v2.2.0 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 Nov 21 2013 08:34 GMT+0000 10 * Plugins: tips modal viewport svg imagemap ie6 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 425 .qtip-tipped .qtip-titlebar{ 426 border-bottom-width: 0; 427 428 color: white; 429 background: #3A79B8; 430 background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D)); 431 background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D); 432 background-image: -moz-linear-gradient(top, #3A79B8, #2E629D); 433 background-image: -ms-linear-gradient(top, #3A79B8, #2E629D); 434 background-image: -o-linear-gradient(top, #3A79B8, #2E629D); 435 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D); 436 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"; 437 } 438 439 .qtip-tipped .qtip-icon{ 440 border: 2px solid #285589; 441 background: #285589; 442 } 443 444 .qtip-tipped .qtip-icon .ui-icon{ 445 background-color: #FBFBFB; 446 color: #555; 447 } 448 449 450/** 451 * Twitter Bootstrap style. 452 * 453 * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11. 454 * Does not work with IE 7. 455 */ 456.qtip-bootstrap{ 457 /** Taken from Bootstrap body */ 458 font-size: 14px; 459 line-height: 20px; 460 color: #333333; 461 462 /** Taken from Bootstrap .popover */ 463 padding: 1px; 464 background-color: #ffffff; 465 border: 1px solid #ccc; 466 border: 1px solid rgba(0, 0, 0, 0.2); 467 -webkit-border-radius: 6px; 468 -moz-border-radius: 6px; 469 border-radius: 6px; 470 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 471 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 472 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 473 -webkit-background-clip: padding-box; 474 -moz-background-clip: padding; 475 background-clip: padding-box; 476} 477 478 .qtip-bootstrap .qtip-titlebar{ 479 /** Taken from Bootstrap .popover-title */ 480 padding: 8px 14px; 481 margin: 0; 482 font-size: 14px; 483 font-weight: normal; 484 line-height: 18px; 485 background-color: #f7f7f7; 486 border-bottom: 1px solid #ebebeb; 487 -webkit-border-radius: 5px 5px 0 0; 488 -moz-border-radius: 5px 5px 0 0; 489 border-radius: 5px 5px 0 0; 490 } 491 492 .qtip-bootstrap .qtip-titlebar .qtip-close{ 493 /** 494 * Overrides qTip2: 495 * .qtip-titlebar .qtip-close{ 496 * [...] 497 * right: 4px; 498 * top: 50%; 499 * [...] 500 * border-style: solid; 501 * } 502 */ 503 right: 11px; 504 top: 45%; 505 border-style: none; 506 } 507 508 .qtip-bootstrap .qtip-content{ 509 /** Taken from Bootstrap .popover-content */ 510 padding: 9px 14px; 511 } 512 513 .qtip-bootstrap .qtip-icon{ 514 /** 515 * Overrides qTip2: 516 * .qtip-default .qtip-icon { 517 * border-color: #CCC; 518 * background: #F1F1F1; 519 * color: #777; 520 * } 521 */ 522 background: transparent; 523 } 524 525 .qtip-bootstrap .qtip-icon .ui-icon{ 526 /** 527 * Overrides qTip2: 528 * .qtip-icon .ui-icon{ 529 * width: 18px; 530 * height: 14px; 531 * } 532 */ 533 width: auto; 534 height: auto; 535 536 /* Taken from Bootstrap .close */ 537 float: right; 538 font-size: 20px; 539 font-weight: bold; 540 line-height: 18px; 541 color: #000000; 542 text-shadow: 0 1px 0 #ffffff; 543 opacity: 0.2; 544 filter: alpha(opacity=20); 545 } 546 547 .qtip-bootstrap .qtip-icon .ui-icon:hover{ 548 /* Taken from Bootstrap .close:hover */ 549 color: #000000; 550 text-decoration: none; 551 cursor: pointer; 552 opacity: 0.4; 553 filter: alpha(opacity=40); 554 } 555 556 557/* IE9 fix - removes all filters */ 558.qtip:not(.ie9haxors) div.qtip-content, 559.qtip:not(.ie9haxors) div.qtip-titlebar{ 560 filter: none; 561 -ms-filter: none; 562} 563 564 565 566.qtip .qtip-tip{ 567 margin: 0 auto; 568 overflow: hidden; 569 z-index: 10; 570 571} 572 573 /* Opera bug #357 - Incorrect tip position 574 https://github.com/Craga89/qTip2/issues/367 */ 575 x:-o-prefocus, .qtip .qtip-tip{ 576 visibility: hidden; 577 } 578 579 .qtip .qtip-tip, 580 .qtip .qtip-tip .qtip-vml, 581 .qtip .qtip-tip canvas{ 582 position: absolute; 583 584 color: #123456; 585 background: transparent; 586 border: 0 dashed transparent; 587 } 588 589 .qtip .qtip-tip canvas{ top: 0; left: 0; } 590 591 .qtip .qtip-tip .qtip-vml{ 592 behavior: url(#default#VML); 593 display: inline-block; 594 visibility: visible; 595 } 596 597#qtip-overlay{ 598 position: fixed; 599 left: 0; top: 0; 600 width: 100%; height: 100%; 601} 602 603 /* Applied to modals with show.modal.blur set to true */ 604 #qtip-overlay.blurs{ cursor: pointer; } 605 606 /* Change opacity of overlay here */ 607 #qtip-overlay div{ 608 position: absolute; 609 left: 0; top: 0; 610 width: 100%; height: 100%; 611 612 background-color: black; 613 614 opacity: 0.7; 615 filter:alpha(opacity=70); 616 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 617 } 618 619 620 621.qtipmodal-ie6fix{ 622 position: absolute !important; 623}