首页 » jQuery » jQuery 插件
网站地图

jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。

该插件目前版本是 1.3，已经很长时间没有更新，推荐使用 jQuery UI 工具提示框（Tooltip）。

访问 jQuery Tooltip 官网

jQuery Tooltip 插件演示。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Tooltip 插件</title>
  6.  
  7. <link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
  8. <link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/demo/screen.css" />
  9. <script src="http://jquery.bassistance.de/tooltip/lib/jquery.js" type="text/javascript"></script>
  10. <script src="http://jquery.bassistance.de/tooltip/lib/jquery.bgiframe.js" type="text/javascript"></script>
  11. <script src="http://jquery.bassistance.de/tooltip/lib/jquery.dimensions.js" type="text/javascript"></script>
  12. <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
  13.  
  14. <script src="http://jquery.bassistance.de/tooltip/demo/chili-1.7.pack.js" type="text/javascript"></script>
  15.  
  16. <script type="text/javascript">
  17. $(function() {
  18. $('#set1 *').tooltip();
  19.  
  20. $("#foottip a").tooltip({
  21. 	bodyHandler: function() {
  22. 		return $($(this).attr("href")).html();
  23. 	},
  24. 	showURL: false
  25. });
  26.  
  27. $('#tonus').tooltip({
  28. 	delay: 0,
  29. 	showURL: false,
  30. 	bodyHandler: function() {
  31. 		return $("<img/>").attr("src", this.src);
  32. 	}
  33. });
  34.  
  35. $('#yahoo a').tooltip({
  36. 	track: true,
  37. 	delay: 0,
  38. 	showURL: false,
  39. 	showBody: " - ",
  40. 	fade: 250
  41. });
  42.  
  43. $("select").tooltip({
  44. 	left: 25
  45. });
  46.  
  47. $("map > area").tooltip({ positionLeft: true });
  48.  
  49. $("#fancy, #fancy2").tooltip({
  50. 	track: true,
  51. 	delay: 0,
  52. 	showURL: false,
  53. 	fixPNG: true,
  54. 	showBody: " - ",
  55. 	extraClass: "pretty fancy",
  56. 	top: -15,
  57. 	left: 5
  58. });
  59.  
  60. $('#pretty').tooltip({
  61. 	track: true,
  62. 	delay: 0,
  63. 	showURL: false,
  64. 	showBody: " - ",
  65. 	extraClass: "pretty",
  66. 	fixPNG: true,
  67. 	left: -120
  68. });
  69.  
  70. $('#right a').tooltip({
  71. 	track: true,
  72. 	delay: 0,
  73. 	showURL: false,
  74. 	extraClass: "right"
  75. });
  76. $('#right2 a').tooltip({ showURL: false, positionLeft: true });
  77.  
  78. $("#block").click($.tooltip.block);
  79.  
  80. });
  81. </script>
  82.  
  83. </head>
  84. <body>
  85. <h1 id="banner">jQuery Tooltip 插件演示</h1>
  86. <div id="main">
  87. 	<fieldset id="set1">
  88. 		<legend>三个带有默认设置的 Tooltip 的元素</legend>
  89. 		<a title="一个带有默认设置的 tooltip，href 显示在标题下" href="http://google.de">链接到谷歌</a>
  90. 		<br/>
  91. 		<label title="一个带有 title 和默认设置的标签，没有 href" for="text1">请输入一些字符！</label>
  92. 		<br/>
  93. 		<input title="请注意，当点击 input 元素时，tooltip 消失" type="text" value="测试" name="action" id="text1"/>
  94. 		
  95. 		<h3>代码</h3>
  96. 		<code class="mix">$('#set1 *').tooltip();</code>
  97. 	</fieldset>
  98. 	
  99. 	<fieldset id="foottip">
  100. 		<legend>使用 bodyHandler 来显示 tooltip 中的脚注</legend>
  101. 		一些指向 <a href="#footnote">脚注</a> 的文本。
  102. 		<br/>
  103. 		<br/>
  104. 		<br/>
  105. 		<br/>
  106. 		<br/>
  107. 		<div id="footnote"><em>这里</em>是一个实际的脚注，通过嵌套的 <strong>HTML</strong> 来完成。</div>
  108. 		
  109. 		<h3>代码</h3>
  110. 		<code class="mix">$("#foottip a").tooltip({
  111. 	bodyHandler: function() {
  112. 		return $($(this).attr("href")).html();
  113. 	},
  114. 	showURL: false
  115. });</code>
  116. 	</fieldset>
  117. 	
  118. 	<fieldset>
  119. 		<legend>一个带有 tooltip 的图像</legend>
  120. 		<img id="tonus" src="http://jquery.bassistance.de/tooltip/demo/image.png" height="80" title="没有延迟。src 值显示在标题下" />
  121. 		<h3>代码</h3>
  122. 	<code class="mix">$('#tonus').tooltip({
  123. 	delay: 0,
  124. 	showURL: false,
  125. 	bodyHandler: function() {
  126. 		return $("&lt;img/&gt;").attr("src", this.src);
  127. 	}
  128. });</code>
  129. 	</fieldset>
  130. 	
  131. 	<fieldset>
  132. 		<legend>锁定 tooltip</legend>
  133. 		<button id="block">点击按钮锁定/解锁所有的 tooltip</button>
  134. 		<h3>代码</h3>
  135. 		<code class="mix">$("#block").click($.tooltip.block);</code>
  136. 	</fieldset>
  137. 	
  138. 	<fieldset>
  139. 		<legend>下面四个链接没有延迟跟踪和渐变，带有额外的内容</legend>
  140. 		<div id="yahoo">
  141. 			<a title="Yahoo doo - more content" href="http://yahoo.com">链接到雅虎</a>
  142. 			<a title="Yahoo doo2 - wohooo" href="http://yahoo.com">链接到雅虎 1</a>
  143. 			<a title="Yahoo doo3" href="http://yahoo.com">链接到雅虎 2</a>
  144. 			<a title="Yahoo doo4 - buga!" href="http://yahoo.com">链接到雅虎 3</a>
  145. 		</div>
  146. 		<select><option>bgiframe test</option></select>
  147. 		<h3>代码</h3>
  148. 		<code class="mix">$('#yahoo a').tooltip({
  149. 	track: true,
  150. 	delay: 0,
  151. 	showURL: false,
  152. 	showBody: " - ",
  153. 	fade: 250
  154. });</code>
  155. 	</fieldset>
  156. 	
  157. 	<fieldset>
  158. 		<legend>带有额外的 class 的 tooltip。用于在一个页面上显示不同的 tooltip 样式</legend>
  159. 		<em>请注意，当鼠标停留在右边视区边界时，右边的那个 tooltip 如何显示一个不同的背景图片。</em>
  160. 		<br/>
  161. 		<span id="fancy" title="注意 - 请注意，这里带有一些自定义的样式。">一个奇特的 tooltip，带有一些自定义的样式。</span>
  162. 		<span id="fancy2" title="注意 - 请注意，这里带有一些自定义的样式。">一个奇特的 tooltip，带有一些自定义的样式。</span>
  163. 		<p><span id="pretty" title="注意 - 请注意，这里带有更多自定义的样式。">一个奇特的 tooltip，带有阴影和一些额外的内容。</span></p>
  164. 		<br/>
  165. 		<br/>
  166. 		<br/>
  167. 		<select><option>bgiframe test</option></select>
  168. 		<h3>代码</h3>
  169. 		<code class="mix">$("#fancy, #fancy2").tooltip({
  170. 	track: true,
  171. 	delay: 0,
  172. 	showURL: false,
  173. 	opacity: 1,
  174. 	fixPNG: true,
  175. 	showBody: " - ",
  176. 	extraClass: "pretty fancy",
  177. 	top: -15,
  178. 	left: 5
  179. });
  180.  
  181. $('#pretty').tooltip({
  182. 	track: true,
  183. 	delay: 0,
  184. 	showURL: false,
  185. 	showBody: " - ",
  186. 	extraClass: "pretty",
  187. 	fixPNG: true,
  188. 	opacity: 0.95,
  189. 	left: -120
  190. });</code>
  191. 	</fieldset>
  192. 	
  193. 	<fieldset>
  194. 		<legend>下拉框</legend>
  195. 		<select title="带有 tooltip 的 select">
  196. 			<option>1. option</option>
  197. 			<option>2. option</option>
  198. 			<option>3. option</option>
  199. 		</select>
  200. 	</fieldset>
  201. 	
  202. 	<fieldset>
  203. 		<legend>带有 tooltip 的图像地图</legend>
  204. 	
  205. 		<img id="map" src="karte.png" width="345" height="312" border="0" usemap="#Landkarte">
  206. 		<map name="Landkarte">
  207. 		  <area shape="rect" coords="11,10,59,29"
  208. 		        href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
  209. 		  <area shape="rect" coords="42,36,96,57"
  210. 		        href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
  211. 		  <area shape="rect" coords="42,59,78,80"
  212. 		        href="http://www.mainz.de/" alt="Mainz" title="Mainz">
  213. 		  <area shape="rect" coords="100,26,152,58"
  214. 		        href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
  215. 		  <area shape="rect" coords="27,113,93,134"
  216. 		        href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
  217. 		  <area shape="rect" coords="100,138,163,159"
  218. 		        href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
  219. 		  <area shape="rect" coords="207,77,266,101"
  220. 		        href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
  221. 		  <area shape="rect" coords="282,62,344,85"
  222. 		        href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
  223. 		  <area shape="rect" coords="255,132,316,150"
  224. 		        href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
  225. 		  <area shape="rect" coords="78,182,132,200"
  226. 		        href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
  227. 		  <area shape="rect" coords="142,169,200,193"
  228. 		        href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
  229. 		  <area shape="rect" coords="140,209,198,230"
  230. 		        href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
  231. 		  <area shape="rect" coords="187,263,222,281"
  232. 		        href="http://www.ulm.de/" alt="Ulm" title="Ulm">
  233. 		  <area shape="rect" coords="249,278,304,297"
  234. 		        href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
  235. 		  <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
  236. 		        href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
  237. 		</map>
  238. 		<h3>代码</h3>
  239. 		<code class="mix">$("map *").tooltip({ positionLeft: true });</code>
  240. 	</fieldset>
  241. 	
  242. 	<fieldset>
  243. 		<legend>在视区的边界测试重新定位</legend>
  244. 		<p id="right">
  245. 			带有固定宽度的 tooltip<br/>
  246. 			<a title="短标题" href="http://google">链接到谷歌</a><br/>
  247. 			<a title="长标题，没有其他含义，只是一个长标题，一个很长很长很长很长很长的标题" href="http://google">链接到谷歌</a>
  248. 		</p>
  249. 		<p id="right2">
  250. 			带有自动宽度的 tooltip<br/>
  251. 			<a title="短标题" href="http://google">链接到谷歌</a><br/>
  252. 			<a title="长标题，没有其他含义，只是一个长标题，一个很长很长很长很长很长的标题" href="http://google">链接到谷歌</a>
  253. 		</p>
  254. 		<h3>代码</h3>
  255. 		<code class="mix">$('#right a').tooltip({
  256. 	track: true,
  257. 	delay: 0,
  258. 	showURL: false,
  259. 	extraClass: "right"
  260. });
  261. $('#right2 a').tooltip({ showURL: false, positionLeft: true });</code>
  262. 	</fieldset>
  263. </div>
  264.  
  265. </body>
  266. </html>