jquery.qtip.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. /*! qTip2 - Pretty powerful tooltips - v2.0.0 - 2012-07-29
  2. * http://craigsworks.com/projects/qtip2/
  3. * Copyright (c) 2012 Craig Michael Thompson; Licensed MIT, GPL */
  4. /* Core qTip styles */
  5. .ui-tooltip, .qtip{
  6. position: absolute;
  7. left: -28000px;
  8. top: -28000px;
  9. display: none;
  10. max-width: 280px;
  11. min-width: 50px;
  12. font-size: 12px;
  13. line-height: 12px;
  14. border-width: 1px;
  15. border-style: solid;
  16. }
  17. /* Fluid class for determining actual width in IE */
  18. .ui-tooltip-fluid{
  19. display: block;
  20. visibility: hidden;
  21. position: static !important;
  22. float: left !important;
  23. }
  24. .ui-tooltip-content{
  25. position: relative;
  26. padding: 5px 9px;
  27. overflow: hidden;
  28. text-align: left;
  29. word-wrap: break-word;
  30. }
  31. .ui-tooltip-titlebar{
  32. position: relative;
  33. min-height: 14px;
  34. padding: 5px 35px 5px 10px;
  35. overflow: hidden;
  36. border-width: 0 0 1px;
  37. font-weight: bold;
  38. }
  39. .ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0 !important; }
  40. /* Default close button class */
  41. .ui-tooltip-titlebar .ui-state-default{
  42. position: absolute;
  43. right: 4px;
  44. top: 50%;
  45. margin-top: -9px;
  46. cursor: pointer;
  47. outline: medium none;
  48. border-width: 1px;
  49. border-style: solid;
  50. }
  51. * html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */
  52. .ui-tooltip-titlebar .ui-icon,
  53. .ui-tooltip-icon .ui-icon{
  54. display: block;
  55. text-indent: -1000em;
  56. direction: ltr;
  57. }
  58. .ui-tooltip-icon, .ui-tooltip-icon .ui-icon{
  59. -moz-border-radius: 3px;
  60. -webkit-border-radius: 3px;
  61. border-radius: 3px;
  62. text-decoration: none;
  63. }
  64. .ui-tooltip-icon .ui-icon{
  65. width: 18px;
  66. height: 14px;
  67. text-align: center;
  68. text-indent: 0;
  69. font: normal bold 10px/13px Tahoma,sans-serif;
  70. color: inherit;
  71. background: transparent none no-repeat -100em -100em;
  72. }
  73. /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
  74. .ui-tooltip-focus{}
  75. /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
  76. .ui-tooltip-hover{}
  77. /* Default tooltip style */
  78. .ui-tooltip-default{
  79. border-color: #F1D031;
  80. background-color: #FFFFA3;
  81. color: #555;
  82. }
  83. .ui-tooltip-default .ui-tooltip-titlebar{
  84. background-color: #FFEF93;
  85. }
  86. .ui-tooltip-default .ui-tooltip-icon{
  87. border-color: #CCC;
  88. background: #F1F1F1;
  89. color: #777;
  90. }
  91. .ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
  92. border-color: #AAA;
  93. color: #111;
  94. }
  95. /*! Light tooltip style */
  96. .ui-tooltip-light{
  97. background-color: white;
  98. border-color: #E2E2E2;
  99. color: #454545;
  100. }
  101. .ui-tooltip-light .ui-tooltip-titlebar{
  102. background-color: #f1f1f1;
  103. }
  104. /*! Dark tooltip style */
  105. .ui-tooltip-dark{
  106. background-color: #505050;
  107. border-color: #303030;
  108. color: #f3f3f3;
  109. }
  110. .ui-tooltip-dark .ui-tooltip-titlebar{
  111. background-color: #404040;
  112. }
  113. .ui-tooltip-dark .ui-tooltip-icon{
  114. border-color: #444;
  115. }
  116. .ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{
  117. border-color: #303030;
  118. }
  119. /*! Cream tooltip style */
  120. .ui-tooltip-cream{
  121. background-color: #FBF7AA;
  122. border-color: #F9E98E;
  123. color: #A27D35;
  124. }
  125. .ui-tooltip-cream .ui-tooltip-titlebar{
  126. background-color: #F0DE7D;
  127. }
  128. .ui-tooltip-cream .ui-state-default .ui-tooltip-icon{
  129. background-position: -82px 0;
  130. }
  131. /*! Red tooltip style */
  132. .ui-tooltip-red{
  133. background-color: #F78B83;
  134. border-color: #D95252;
  135. color: #912323;
  136. }
  137. .ui-tooltip-red .ui-tooltip-titlebar{
  138. background-color: #F06D65;
  139. }
  140. .ui-tooltip-red .ui-state-default .ui-tooltip-icon{
  141. background-position: -102px 0;
  142. }
  143. .ui-tooltip-red .ui-tooltip-icon{
  144. border-color: #D95252;
  145. }
  146. .ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{
  147. border-color: #D95252;
  148. }
  149. /*! Green tooltip style */
  150. .ui-tooltip-green{
  151. background-color: #CAED9E;
  152. border-color: #90D93F;
  153. color: #3F6219;
  154. }
  155. .ui-tooltip-green .ui-tooltip-titlebar{
  156. background-color: #B0DE78;
  157. }
  158. .ui-tooltip-green .ui-state-default .ui-tooltip-icon{
  159. background-position: -42px 0;
  160. }
  161. /*! Blue tooltip style */
  162. .ui-tooltip-blue{
  163. background-color: #E5F6FE;
  164. border-color: #ADD9ED;
  165. color: #5E99BD;
  166. }
  167. .ui-tooltip-blue .ui-tooltip-titlebar{
  168. background-color: #D0E9F5;
  169. }
  170. .ui-tooltip-blue .ui-state-default .ui-tooltip-icon{
  171. background-position: -2px 0;
  172. }
  173. /* Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
  174. .ui-tooltip-shadow{
  175. -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  176. -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  177. box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  178. }
  179. /* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
  180. .ui-tooltip-rounded,
  181. .ui-tooltip-tipsy,
  182. .ui-tooltip-bootstrap{
  183. -moz-border-radius: 5px;
  184. -webkit-border-radius: 5px;
  185. border-radius: 5px;
  186. }
  187. /* Youtube tooltip style */
  188. .ui-tooltip-youtube{
  189. -moz-border-radius: 2px;
  190. -webkit-border-radius: 2px;
  191. border-radius: 2px;
  192. -webkit-box-shadow: 0 0 3px #333;
  193. -moz-box-shadow: 0 0 3px #333;
  194. box-shadow: 0 0 3px #333;
  195. color: white;
  196. border-width: 0;
  197. background: #4A4A4A;
  198. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black));
  199. background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%);
  200. background-image: -moz-linear-gradient(top,#4A4A4A 0,black 100%);
  201. background-image: -ms-linear-gradient(top,#4A4A4A 0,black 100%);
  202. background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%);
  203. }
  204. .ui-tooltip-youtube .ui-tooltip-titlebar{
  205. background-color: #4A4A4A;
  206. background-color: rgba(0,0,0,0);
  207. }
  208. .ui-tooltip-youtube .ui-tooltip-content{
  209. padding: .75em;
  210. font: 12px arial,sans-serif;
  211. filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
  212. -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
  213. }
  214. .ui-tooltip-youtube .ui-tooltip-icon{
  215. border-color: #222;
  216. }
  217. .ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{
  218. border-color: #303030;
  219. }
  220. /* jQuery TOOLS Tooltip style */
  221. .ui-tooltip-jtools{
  222. background: #232323;
  223. background: rgba(0, 0, 0, 0.7);
  224. background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
  225. background-image: -moz-linear-gradient(top, #717171, #232323);
  226. background-image: -webkit-linear-gradient(top, #717171, #232323);
  227. background-image: -ms-linear-gradient(top, #717171, #232323);
  228. background-image: -o-linear-gradient(top, #717171, #232323);
  229. border: 2px solid #ddd;
  230. border: 2px solid rgba(241,241,241,1);
  231. -moz-border-radius: 2px;
  232. -webkit-border-radius: 2px;
  233. border-radius: 2px;
  234. -webkit-box-shadow: 0 0 12px #333;
  235. -moz-box-shadow: 0 0 12px #333;
  236. box-shadow: 0 0 12px #333;
  237. }
  238. /* IE Specific */
  239. .ui-tooltip-jtools .ui-tooltip-titlebar{
  240. background-color: transparent;
  241. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
  242. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
  243. }
  244. .ui-tooltip-jtools .ui-tooltip-content{
  245. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
  246. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
  247. }
  248. .ui-tooltip-jtools .ui-tooltip-titlebar,
  249. .ui-tooltip-jtools .ui-tooltip-content{
  250. background: transparent;
  251. color: white;
  252. border: 0 dashed transparent;
  253. }
  254. .ui-tooltip-jtools .ui-tooltip-icon{
  255. border-color: #555;
  256. }
  257. .ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{
  258. border-color: #333;
  259. }
  260. /* Cluetip style */
  261. .ui-tooltip-cluetip{
  262. -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  263. -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  264. box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  265. background-color: #D9D9C2;
  266. color: #111;
  267. border: 0 dashed transparent;
  268. }
  269. .ui-tooltip-cluetip .ui-tooltip-titlebar{
  270. background-color: #87876A;
  271. color: white;
  272. border: 0 dashed transparent;
  273. }
  274. .ui-tooltip-cluetip .ui-tooltip-icon{
  275. border-color: #808064;
  276. }
  277. .ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{
  278. border-color: #696952;
  279. color: #696952;
  280. }
  281. /* Tipsy style */
  282. .ui-tooltip-tipsy{
  283. background: black;
  284. background: rgba(0, 0, 0, .87);
  285. color: white;
  286. border: 0 solid transparent;
  287. font-size: 11px;
  288. font-family: 'Lucida Grande', sans-serif;
  289. font-weight: bold;
  290. line-height: 16px;
  291. text-shadow: 0 1px black;
  292. }
  293. .ui-tooltip-tipsy .ui-tooltip-titlebar{
  294. padding: 6px 35px 0 10;
  295. background-color: transparent;
  296. }
  297. .ui-tooltip-tipsy .ui-tooltip-content{
  298. padding: 6px 10;
  299. }
  300. .ui-tooltip-tipsy .ui-tooltip-icon{
  301. border-color: #222;
  302. text-shadow: none;
  303. }
  304. .ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{
  305. border-color: #303030;
  306. }
  307. /* Tipped style */
  308. .ui-tooltip-tipped{
  309. border: 3px solid #959FA9;
  310. -moz-border-radius: 3px;
  311. -webkit-border-radius: 3px;
  312. border-radius: 3px;
  313. background-color: #F9F9F9;
  314. color: #454545;
  315. font-weight: normal;
  316. font-family: serif;
  317. }
  318. .ui-tooltip-tipped .ui-tooltip-titlebar{
  319. border-bottom-width: 0;
  320. color: white;
  321. background: #3A79B8;
  322. background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
  323. background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
  324. background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
  325. background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
  326. background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
  327. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
  328. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
  329. }
  330. .ui-tooltip-tipped .ui-tooltip-icon{
  331. border: 2px solid #285589;
  332. background: #285589;
  333. }
  334. .ui-tooltip-tipped .ui-tooltip-icon .ui-icon{
  335. background-color: #FBFBFB;
  336. color: #555;
  337. }
  338. /**
  339. * Twitter Bootstrap style.
  340. *
  341. * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
  342. * Does not work with IE 7.
  343. */
  344. .ui-tooltip-bootstrap{
  345. font-size: 13px;
  346. line-height: 18px;
  347. color: #333333;
  348. background-color: #ffffff;
  349. border: 1px solid #ccc;
  350. border: 1px solid rgba(0, 0, 0, 0.2);
  351. *border-right-width: 2px;
  352. *border-bottom-width: 2px;
  353. -webkit-border-radius: 5px;
  354. -moz-border-radius: 5px;
  355. border-radius: 5px;
  356. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  357. -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  358. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  359. -webkit-background-clip: padding-box;
  360. -moz-background-clip: padding;
  361. background-clip: padding-box;
  362. }
  363. .ui-tooltip-bootstrap .ui-tooltip-titlebar{
  364. font-size: 18px;
  365. line-height: 22px;
  366. border-bottom: 1px solid #ccc;
  367. background-color: transparent;
  368. }
  369. .ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
  370. right: 9px; top: 49%;
  371. border-style: none;
  372. }
  373. .ui-tooltip-bootstrap .ui-tooltip-icon{
  374. background: white;
  375. }
  376. .ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon{
  377. width: auto;
  378. height: auto;
  379. float: right;
  380. font-size: 20px;
  381. font-weight: bold;
  382. line-height: 18px;
  383. color: #000000;
  384. text-shadow: 0 1px 0 #ffffff;
  385. opacity: 0.2;
  386. filter: alpha(opacity=20);
  387. }
  388. .ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon:hover{
  389. color: #000000;
  390. text-decoration: none;
  391. cursor: pointer;
  392. opacity: 0.4;
  393. filter: alpha(opacity=40);
  394. }
  395. /* IE9 fix - removes all filters */
  396. .ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
  397. .ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{
  398. filter: none;
  399. -ms-filter: none;
  400. }
  401. /* Tips plugin */
  402. .ui-tooltip .ui-tooltip-tip{
  403. margin: 0 auto;
  404. overflow: hidden;
  405. z-index: 10;
  406. }
  407. .ui-tooltip .ui-tooltip-tip,
  408. .ui-tooltip .ui-tooltip-tip *{
  409. position: absolute;
  410. line-height: 0.1px !important;
  411. font-size: 0.1px !important;
  412. color: #123456;
  413. background: transparent;
  414. border: 0 dashed transparent;
  415. }
  416. .ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }
  417. /* Modal plugin */
  418. #qtip-overlay{
  419. position: fixed;
  420. left: -10000em;
  421. top: -10000em;
  422. }
  423. /* Applied to modals with show.modal.blur set to true */
  424. #qtip-overlay.blurs{ cursor: pointer; }
  425. /* Change opacity of overlay here */
  426. #qtip-overlay div{
  427. position: absolute;
  428. left: 0; top: 0;
  429. width: 100%; height: 100%;
  430. background-color: black;
  431. opacity: 0.7;
  432. filter:alpha(opacity=70);
  433. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  434. }