jQuery 入门教程(43): jQuery UI Tooltip 示例

系统管理员 2024-02-17 14:13 54阅读 0赞

JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">1</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;!doctype html&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">4</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">meta</code>&nbsp;<code style="">charset</code><code style="">=</code><code style="">"utf-8"</code>&nbsp;<code style="">/&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">5</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">title</code><code style="">&gt;jQuery UI Demos&lt;/</code><code style="">title</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">6</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">link</code>&nbsp;<code style="">rel</code><code style="">=</code><code style="">"stylesheet"</code>&nbsp;<code style="">href</code><code style="">=</code><code style="">"themes/trontastic/jquery-ui.css"</code>&nbsp;<code style="">/&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">7</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">script</code>&nbsp;<code style="">src</code><code style="">=</code><code style="">"scripts/jquery-1.9.1.js"</code><code style="">&gt;&lt;/</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">8</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">script</code>&nbsp;<code style="">src</code><code style="">=</code><code style="">"scripts/jquery-ui-1.10.1.custom.js"</code><code style="">&gt;&lt;/</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">9</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">10</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">$(function () { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">11</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">$(document).tooltip();</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">13</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">&lt;/</code><code style="">script</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">14</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">&lt;</code><code style="">style</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">15</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">label { </code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">16</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">display: inline-block;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">17</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="">width: 5em;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">19</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&nbsp;&nbsp;</code><code style="">&lt;/</code><code style="">style</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">23</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">p</code><code style="">&gt;&lt;</code><code style="">a</code>&nbsp;<code style="">href</code><code style="">=</code><code style="">"#"</code>&nbsp;<code style="">title</code><code style="">=</code><code style="">"That's what this widget is"</code><code style="">&gt;Tooltips&lt;/</code><code style="">a</code><code style="">&gt; can be attached to any element. When you hover</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">24</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.&lt;/</code><code style="">p</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">25</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">p</code><code style="">&gt;But as it's not a native tooltip, it can be styled. Any themes built with</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">26</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">a</code>&nbsp;<code style="">href</code><code style="">=</code><code style="">"http://themeroller.com"</code>&nbsp;<code style="">title</code><code style="">=</code><code style="">"ThemeRoller: jQuery UI's theme builder application"</code><code style="">&gt;ThemeRoller&lt;/</code><code style="">a</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">27</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">will also style tooltips accordingly.&lt;/</code><code style="">p</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">28</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">p</code><code style="">&gt;Tooltips are also useful for form elements, to show some additional information in the context of each field.&lt;/</code><code style="">p</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">29</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">p</code><code style="">&gt;&lt;</code><code style="">label</code>&nbsp;<code style="">for</code><code style="">=</code><code style="">"age"</code><code style="">&gt;Your age:&lt;/</code><code style="">label</code><code style="">&gt;&lt;</code><code style="">input</code>&nbsp;<code style="">id</code><code style="">=</code><code style="">"age"</code>&nbsp;<code style="">title</code><code style="">=</code><code style="">"We ask for your age only for statistical purposes."</code>&nbsp;<code style="">/&gt;&lt;/</code><code style="">p</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><code style="">30</code></td> 
   <td style="border-width:0px 0px 0px 3px!important; margin:0px!important; padding:0px 0px 0px 0.5em!important; outline:0px!important; left:auto!important; top:auto!important; width:auto!important; height:auto!important; right:auto!important; bottom:auto!important; color:rgb(185,189,182)!important; line-height:1.1em!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; font-variant:inherit; vertical-align:top!important; border-left-color:rgb(67,90,95)!important; border-left-style:solid!important; float:none!important; position:static!important; direction:ltr!important"> <code style="">&lt;</code><code style="">p</code><code style="">&gt;Hover the field to see the tooltip.&lt;/</code><code style="">p</code><code style="">&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

[![20130426001][]][20130426001]

此外，可以通过CSS修改缺省Tooltip的显示风格，或是自定义Tooltip 显示内容（比如地图，图像等等），这里就不一一介绍了。

[20130426001]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/04/20130426001.png