源代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 工具提示框（Tooltip） - 表单</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> <style> label { display: inline-block; width: 5em; } fieldset div { margin-bottom: 2em; } fieldset .help { display: inline-block; } .ui-tooltip { width: 210px; } </style> <script> $(function() { var tooltips = $( "[title]" ).tooltip(); $( "<button>" ) .text( "Show help" ) .button() .click(function() { tooltips.tooltip( "open" ); }) .insertAfter( "form" ); }); </script> </head> <body> <form> <fieldset> <div> <label for="firstname">名字</label> <input id="firstname" name="firstname" title="请提供您的名字。"> </div> <div> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" title="请提供您的姓氏。"> </div> <div> <label for="address">地址</label> <input id="address" name="address" title="您的家庭或工作地址。"> </div> </fieldset> </form> </body> </html>
运行结果：