You are here

Home » API reference » qTip (Stylish jQuery Tooltips) 7

jquery.qtip.css in qTip (Stylish jQuery Tooltips) 7

Same filename and directory in other branches
  1. 6.2 library/jquery.qtip.css
  2. 6 library/jquery.qtip.css
/*
* qTip - The jQuery tooltip plugin
* http://craigsworks.com/projects/qtip/
*
* Version: 2.0.0pre
* Copyright 2009 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPL Version 2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Mon Sep 6 14:15:53 2010 +0100
*/

.ui-tooltip-accessible{
	left: -10000em !important;
	top: -10000em !important;
	display: block !important;
	visibility: hidden !important;
}

	/* IE6 ONLY - Width detection fix */
	* html .ui-tooltip-accessible{
		position: static !important;
		float: left !important;
	}

.ui-tooltip, .qtip{
	position: absolute;
	display: none;

	max-width: 280px;
	min-width: 50px;
}

	.ui-tooltip .ui-tooltip-wrapper{
		position: relative;
		overflow: hidden;

		border-width: 3px;
		border-style: solid;
	}

	.ui-tooltip .ui-tooltip-content{
		position: relative;
		padding: 5px 9px;

		text-align: left;
		word-wrap: break-word;
		overflow: hidden;
	}

	.ui-tooltip .ui-tooltip-titlebar{
		position: relative;
		padding: 6px 35px 6px 10px;

		font-weight: bold;
	}

		/*! Default close button class */
		.ui-tooltip .ui-tooltip-close{
			position: absolute;
			height: 16px;
			width: 16px;
			padding: 1px;
			right: 5px;
			top: 5px;

			cursor: pointer;
			line-height: 0px;
			font-size: 0px;
		}

			.ui-tooltip .ui-tooltip-close .ui-icon{
				height: 16px;
				width: 16px;
				display: block;

				opacity: 0.8;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
				filter: alpha(opacity=80);
			}
			.ui-tooltip .ui-tooltip-close:hover .ui-icon{
				opacity: 1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter: alpha(opacity=100);
			}

		/*! Custom button class */
		.ui-tooltip .ui-tooltip-button{
			float: right;
		}

	/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
	.ui-tooltip-focus{

	}


/*! Default tooltip style */
.ui-tooltip-wrapper{
	border-color: #F9E98E;
	background-color: #FBF7AA;
	color: #A27D35;
}

	.ui-tooltip .ui-tooltip-titlebar{
		background-color: #F0DE7D;
	}

	.ui-tooltip .ui-tooltip-close .ui-icon{
		background: #A27D35 url('images/close.png') no-repeat 50% 50%;
	}

/*! Plain tooltip style */
.ui-tooltip-plain .ui-tooltip-wrapper{
	border-color: black;
	border-width: 1px;

	background-color: white;
	color: black;
}

	.ui-tooltip-plain .ui-tooltip-titlebar{
		background-color: white;
	}

	.ui-tooltip-plain .ui-tooltip-close .ui-icon{
		background: black;
	}

/*! Light tooltip style */
.ui-tooltip-light .ui-tooltip-wrapper{
	border-color: #E2E2E2;
	background-color: white;
	color: #454545;
}

	.ui-tooltip-light .ui-tooltip-titlebar{
		background-color: #f1f1f1;
	}

	.ui-tooltip-light .ui-tooltip-close .ui-icon{
		background: #454545 url('images/close-light.png') no-repeat 50% 50%;
	}


/*! Dark tooltip style */
.ui-tooltip-dark .ui-tooltip-wrapper{
	border-color: #303030;
	background-color: #505050;
	color: #f3f3f3;
}

	.ui-tooltip-dark .ui-tooltip-titlebar{
		background-color: #404040;
	}

	.ui-tooltip-dark .ui-tooltip-close .ui-icon{
		background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;
	}


/*! Red tooltip style */
.ui-tooltip-red .ui-tooltip-wrapper{
	border-color: #D95252;
	background-color: #F78B83;
	color: #912323;
}

	.ui-tooltip-red .ui-tooltip-titlebar{
		background-color: #F06D65;
	}

	.ui-tooltip-red .ui-tooltip-close .ui-icon{
		background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;
	}


/*! Green tooltip style */
.ui-tooltip-green .ui-tooltip-wrapper{
	border-color: #90D93F;
	background-color: #CAED9E;
	color: #3F6219;
}

	.ui-tooltip-green .ui-tooltip-titlebar{
		background-color: #B0DE78;
	}

	.ui-tooltip-green .ui-tooltip-close .ui-icon{
		background: #58792E url('images/close-green.png') no-repeat 50% 50%;
	}


/*! Blue tooltip style */
.ui-tooltip-blue .ui-tooltip-wrapper{
	border-color: #ADD9ED;
	background-color: #E5F6FE;
	color: #5E99BD;
}

	.ui-tooltip-blue .ui-tooltip-titlebar{
		background-color: #D0E9F5;
	}

	.ui-tooltip-blue .ui-tooltip-close .ui-icon{
		background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;
	}


/*! Add shadows to your tooltips in all supported browsers */
.ui-tooltip-shadow{
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

div.ui-tooltip-tip{
	position: absolute;
	margin: 0 auto;
	overflow: hidden;

	line-height: 0.1px;
	font-size: 1px;

	background: transparent !important;
	border: 0px !important;
	z-index: 10;
}

	div.ui-tooltip-tip *{
		line-height: 0.1px;
		font-size: 0.1px;
	}

	div.ui-tooltip-tip div{
		background: transparent !important;
		border: 0px dashed transparent;
	}

#qtip-overlay{
	position: absolute;
	left: -10000em;
	top: -10000em;

	background-color: black;
	cursor: pointer;

	/* Set this to any below 15000 (default starting z-index for qTips) */
	z-index: 14999;
}

/*! Youtube tooltip style */
div.ui-tooltip-youtube .ui-tooltip-wrapper{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 0 3px #333;
	-moz-box-shadow: 0 0 3px #333;
	box-shadow: 0 0 3px #333;

	border-color: #CCCCCC;
	border-width: 1px;

	color: white;
}

	div.ui-tooltip-youtube .ui-tooltip-close .ui-icon{
		background: #4D9FBF url('images/close-dark.png') no-repeat 50% 50%;
	}

	div.ui-tooltip-youtube .ui-tooltip-titlebar,
	div.ui-tooltip-youtube .ui-tooltip-content{
		background-color: rgba(0, 0, 0, 0.85);
	}

	/* IE6 Fallback */
	* html div.ui-tooltip-youtube-wrapper{
		background-color: black;
	}


/* jQuery TOOLS Tooltip style */
div.ui-tooltip-jtools .ui-tooltip-wrapper{
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	border-color: white;
	border-width: 2px;

	-webkit-box-shadow: 0 0 12px #333;
	-moz-box-shadow: 0 0 12px #333;
	box-shadow: 0 0 12px #333;

	background-color: rgba(0, 0, 0, 0.7);
	background-image: -moz-linear-gradient(top, #717171, #232323);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323)";

	color: white;
}

	div.ui-tooltip-jtools .ui-tooltip-titlebar,
	div.ui-tooltip-jtools .ui-tooltip-content{
		background: none;
	}

	div.ui-tooltip-jtools .ui-tooltip-close .ui-icon{
		background: black url('images/close-dark.png') no-repeat 50% 50%;
	}


/* Cluetip style */
div.ui-tooltip-cluetip .ui-tooltip-wrapper{
	border-width: 0;

	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
}

	div.ui-tooltip-cluetip .ui-tooltip-titlebar{
		background-color: #87876A;
		color: white;
	}
	div.ui-tooltip-cluetip .ui-tooltip-content{
		background-color: #D9D9C2;
		color: #111;
	}

File

library/jquery.qtip.css
View source 
  1. /*

  2. * qTip - The jQuery tooltip plugin

  3. * http://craigsworks.com/projects/qtip/

  4. *

  5. * Version: 2.0.0pre

  6. * Copyright 2009 Craig Michael Thompson - http://craigsworks.com

  7. *

  8. * Dual licensed under MIT or GPL Version 2 licenses

  9. *   http://en.wikipedia.org/wiki/MIT_License

  10. *   http://en.wikipedia.org/wiki/GNU_General_Public_License

  11. *

  12. * Date: Mon Sep 6 14:15:53 2010 +0100

  13. */

  14. 

  15. .ui-tooltip-accessible{

  16. 	left: -10000em !important;

  17. 	top: -10000em !important;

  18. 	display: block !important;

  19. 	visibility: hidden !important;

  20. }

  21. 

  22. 	/* IE6 ONLY - Width detection fix */

  23. 	* html .ui-tooltip-accessible{

  24. 		position: static !important;

  25. 		float: left !important;

  26. 	}

  27. 

  28. .ui-tooltip, .qtip{

  29. 	position: absolute;

  30. 	display: none;

  31. 

  32. 	max-width: 280px;

  33. 	min-width: 50px;

  34. }

  35. 

  36. 	.ui-tooltip .ui-tooltip-wrapper{

  37. 		position: relative;

  38. 		overflow: hidden;

  39. 

  40. 		border-width: 3px;

  41. 		border-style: solid;

  42. 	}

  43. 

  44. 	.ui-tooltip .ui-tooltip-content{

  45. 		position: relative;

  46. 		padding: 5px 9px;

  47. 

  48. 		text-align: left;

  49. 		word-wrap: break-word;

  50. 		overflow: hidden;

  51. 	}

  52. 

  53. 	.ui-tooltip .ui-tooltip-titlebar{

  54. 		position: relative;

  55. 		padding: 6px 35px 6px 10px;

  56. 

  57. 		font-weight: bold;

  58. 	}

  59. 

  60. 		/*! Default close button class */

  61. 		.ui-tooltip .ui-tooltip-close{

  62. 			position: absolute;

  63. 			height: 16px;

  64. 			width: 16px;

  65. 			padding: 1px;

  66. 			right: 5px;

  67. 			top: 5px;

  68. 

  69. 			cursor: pointer;

  70. 			line-height: 0px;

  71. 			font-size: 0px;

  72. 		}

  73. 

  74. 			.ui-tooltip .ui-tooltip-close .ui-icon{

  75. 				height: 16px;

  76. 				width: 16px;

  77. 				display: block;

  78. 

  79. 				opacity: 0.8;

  80. 				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  81. 				filter: alpha(opacity=80);

  82. 			}

  83. 			.ui-tooltip .ui-tooltip-close:hover .ui-icon{

  84. 				opacity: 1;

  85. 				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  86. 				filter: alpha(opacity=100);

  87. 			}

  88. 

  89. 		/*! Custom button class */

  90. 		.ui-tooltip .ui-tooltip-button{

  91. 			float: right;

  92. 		}

  93. 

  94. 	/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */

  95. 	.ui-tooltip-focus{

  96. 

  97. 	}

  98. 

  99. 

  100. /*! Default tooltip style */

  101. .ui-tooltip-wrapper{

  102. 	border-color: #F9E98E;

  103. 	background-color: #FBF7AA;

  104. 	color: #A27D35;

  105. }

  106. 

  107. 	.ui-tooltip .ui-tooltip-titlebar{

  108. 		background-color: #F0DE7D;

  109. 	}

  110. 

  111. 	.ui-tooltip .ui-tooltip-close .ui-icon{

  112. 		background: #A27D35 url('images/close.png') no-repeat 50% 50%;

  113. 	}

  114. 

  115. /*! Plain tooltip style */

  116. .ui-tooltip-plain .ui-tooltip-wrapper{

  117. 	border-color: black;

  118. 	border-width: 1px;

  119. 

  120. 	background-color: white;

  121. 	color: black;

  122. }

  123. 

  124. 	.ui-tooltip-plain .ui-tooltip-titlebar{

  125. 		background-color: white;

  126. 	}

  127. 

  128. 	.ui-tooltip-plain .ui-tooltip-close .ui-icon{

  129. 		background: black;

  130. 	}

  131. 

  132. /*! Light tooltip style */

  133. .ui-tooltip-light .ui-tooltip-wrapper{

  134. 	border-color: #E2E2E2;

  135. 	background-color: white;

  136. 	color: #454545;

  137. }

  138. 

  139. 	.ui-tooltip-light .ui-tooltip-titlebar{

  140. 		background-color: #f1f1f1;

  141. 	}

  142. 

  143. 	.ui-tooltip-light .ui-tooltip-close .ui-icon{

  144. 		background: #454545 url('images/close-light.png') no-repeat 50% 50%;

  145. 	}

  146. 

  147. 

  148. /*! Dark tooltip style */

  149. .ui-tooltip-dark .ui-tooltip-wrapper{

  150. 	border-color: #303030;

  151. 	background-color: #505050;

  152. 	color: #f3f3f3;

  153. }

  154. 

  155. 	.ui-tooltip-dark .ui-tooltip-titlebar{

  156. 		background-color: #404040;

  157. 	}

  158. 

  159. 	.ui-tooltip-dark .ui-tooltip-close .ui-icon{

  160. 		background: #f3f3f3 url('images/close-dark.png') no-repeat 50% 50%;

  161. 	}

  162. 

  163. 

  164. /*! Red tooltip style */

  165. .ui-tooltip-red .ui-tooltip-wrapper{

  166. 	border-color: #D95252;

  167. 	background-color: #F78B83;

  168. 	color: #912323;

  169. }

  170. 

  171. 	.ui-tooltip-red .ui-tooltip-titlebar{

  172. 		background-color: #F06D65;

  173. 	}

  174. 

  175. 	.ui-tooltip-red .ui-tooltip-close .ui-icon{

  176. 		background: #9C2F2F url('images/close-red.png') no-repeat 50% 50%;

  177. 	}

  178. 

  179. 

  180. /*! Green tooltip style */

  181. .ui-tooltip-green .ui-tooltip-wrapper{

  182. 	border-color: #90D93F;

  183. 	background-color: #CAED9E;

  184. 	color: #3F6219;

  185. }

  186. 

  187. 	.ui-tooltip-green .ui-tooltip-titlebar{

  188. 		background-color: #B0DE78;

  189. 	}

  190. 

  191. 	.ui-tooltip-green .ui-tooltip-close .ui-icon{

  192. 		background: #58792E url('images/close-green.png') no-repeat 50% 50%;

  193. 	}

  194. 

  195. 

  196. /*! Blue tooltip style */

  197. .ui-tooltip-blue .ui-tooltip-wrapper{

  198. 	border-color: #ADD9ED;

  199. 	background-color: #E5F6FE;

  200. 	color: #5E99BD;

  201. }

  202. 

  203. 	.ui-tooltip-blue .ui-tooltip-titlebar{

  204. 		background-color: #D0E9F5;

  205. 	}

  206. 

  207. 	.ui-tooltip-blue .ui-tooltip-close .ui-icon{

  208. 		background: #4D9FBF url('images/close-blue.png') no-repeat 50% 50%;

  209. 	}

  210. 

  211. 

  212. /*! Add shadows to your tooltips in all supported browsers */

  213. .ui-tooltip-shadow{

  214.   -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

  215.   -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

  216.   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

  217. 

  218.   filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');

  219.   -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";

  220. }

  221. 

  222. div.ui-tooltip-tip{

  223. 	position: absolute;

  224. 	margin: 0 auto;

  225. 	overflow: hidden;

  226. 

  227. 	line-height: 0.1px;

  228. 	font-size: 1px;

  229. 

  230. 	background: transparent !important;

  231. 	border: 0px !important;

  232. 	z-index: 10;

  233. }

  234. 

  235. 	div.ui-tooltip-tip *{

  236. 		line-height: 0.1px;

  237. 		font-size: 0.1px;

  238. 	}

  239. 

  240. 	div.ui-tooltip-tip div{

  241. 		background: transparent !important;

  242. 		border: 0px dashed transparent;

  243. 	}

  244. 

  245. #qtip-overlay{

  246. 	position: absolute;

  247. 	left: -10000em;

  248. 	top: -10000em;

  249. 

  250. 	background-color: black;

  251. 	cursor: pointer;

  252. 

  253. 	/* Set this to any below 15000 (default starting z-index for qTips) */

  254. 	z-index: 14999;

  255. }

  256. 

  257. /*! Youtube tooltip style */

  258. div.ui-tooltip-youtube .ui-tooltip-wrapper{

  259. 	-moz-border-radius: 5px;

  260. 	-webkit-border-radius: 5px;

  261. 	border-radius: 5px;

  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. 	border-color: #CCCCCC;

  268. 	border-width: 1px;

  269. 

  270. 	color: white;

  271. }

  272. 

  273. 	div.ui-tooltip-youtube .ui-tooltip-close .ui-icon{

  274. 		background: #4D9FBF url('images/close-dark.png') no-repeat 50% 50%;

  275. 	}

  276. 

  277. 	div.ui-tooltip-youtube .ui-tooltip-titlebar,

  278. 	div.ui-tooltip-youtube .ui-tooltip-content{

  279. 		background-color: rgba(0, 0, 0, 0.85);

  280. 	}

  281. 

  282. 	/* IE6 Fallback */

  283. 	* html div.ui-tooltip-youtube-wrapper{

  284. 		background-color: black;

  285. 	}

  286. 

  287. 

  288. /* jQuery TOOLS Tooltip style */

  289. div.ui-tooltip-jtools .ui-tooltip-wrapper{

  290. 	-moz-border-radius: 2px;

  291. 	-webkit-border-radius: 2px;

  292. 	border-radius: 2px;

  293. 

  294. 	border-color: white;

  295. 	border-width: 2px;

  296. 

  297. 	-webkit-box-shadow: 0 0 12px #333;

  298. 	-moz-box-shadow: 0 0 12px #333;

  299. 	box-shadow: 0 0 12px #333;

  300. 

  301. 	background-color: rgba(0, 0, 0, 0.7);

  302. 	background-image: -moz-linear-gradient(top, #717171, #232323);

  303. 	background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));

  304. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323);

  305. 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#232323)";

  306. 

  307. 	color: white;

  308. }

  309. 

  310. 	div.ui-tooltip-jtools .ui-tooltip-titlebar,

  311. 	div.ui-tooltip-jtools .ui-tooltip-content{

  312. 		background: none;

  313. 	}

  314. 

  315. 	div.ui-tooltip-jtools .ui-tooltip-close .ui-icon{

  316. 		background: black url('images/close-dark.png') no-repeat 50% 50%;

  317. 	}

  318. 

  319. 

  320. /* Cluetip style */

  321. div.ui-tooltip-cluetip .ui-tooltip-wrapper{

  322. 	border-width: 0;

  323. 

  324. 	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  325. 	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  326. 	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);

  327. }

  328. 

  329. 	div.ui-tooltip-cluetip .ui-tooltip-titlebar{

  330. 		background-color: #87876A;

  331. 		color: white;

  332. 	}

  333. 	div.ui-tooltip-cluetip .ui-tooltip-content{

  334. 		background-color: #D9D9C2;

  335. 		color: #111;

  336. 	}

  337.