3-9 工具提示插件——tooltip
本节编程练习不计算学习进度，请电脑登录imooc.com操作

工具提示插件——tooltip

工具提示插件可以定制元素的提示外观，提示内容支持变量、Ajax远程获取，还可以自定义提示内容显示的位置，它的调用格式如下：

$(selector).tooltip({options});

其中selector为需要显示提示信息的元素，可选项参数options为tooltip()方法的配置对象，在该对象中，可以设置提示信息的弹出、隐藏时的效果和所在位置。

例如，将三个<a>元素与工具提示插件相绑定，当把鼠标移动在<a>元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于各个<a>元素都绑定了工具提示插件，因此，将在指定的位置并以动画效果展示各个<a>元素中title属性所对应的内容。

任务

我来试试，亲自调用工具提示插件展示文本输入框的提示信息。

在下列代码的第26行，将文本输入框元素绑定提示插件，当鼠标在文本输入框中移动时，在指定的位置并以动画的效果显示对应的title属性值内容。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>工具提示插件</title>
  5.         <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  8.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title">
  14.                 工具提示插件</div>
  15.             <div class="content">
  16.                 <div>
  17.                     <label for="name">
  18.                         姓名</label>
  19.                     <input id="name" name="name" title="我是土豪，欢迎与我做朋友" />
  20.                 </div>
  21.             </div>
  22.         </div>
  23.  
  24.         <script type="text/javascript">
  25.             $(function () {
  26.                 ?({
  27.                     show: {
  28.                         effect: "slideDown",
  29.                         delay: 350
  30.                     },
  31.                     hide: {
  32.                         effect: "explode",
  33.                         delay: 350
  34.                     },
  35.                     position: {
  36.                         my: "left top",
  37.                         at: "left bottom"
  38.                     }
  39.                 });
  40.             });
  41.         </script>
  42.     </body>
  43. </html>
  1. body
  2. {
  3.     font-size: 13px;
  4. }
  5. #divtest
  6. {
  7.     width: 382px;
  8. }
  9. #divtest .title
  10. {
  11.     padding: 8px;
  12.     background-color: Blue;
  13.     color: #fff;
  14.     height: 23px;
  15.     line-height: 23px;
  16.     font-size: 15px;
  17.     font-weight: bold;
  18. }
  19. #divtest .content
  20. {
  21.     padding: 8px 0px;
  22.     background-color: #fff;
  23.     font-size: 13px;
  24. }
  25. #divtest a
  26. {
  27.     width: 127px;
  28. }
  29. .fl
  30. {
  31.     float: left;
  32. }
  33. .fr
  34. {
  35.     float: right;
  36. }
下一节