想顯示元素的tooltip, 用jquery須要以下步驟。 javascript
1. 找到要顯示tooltip的目標 css
2. 定義tooltip消息和樣式。 html
3.顯示tooltip有三個函數showTooltips, hidetoops, changeTooltipsPosition. java
4.鼠標進入時showTooltips,初始化位置changeTooltipsPosition jquery
5.鼠標移動時要改變位置changeTooltipsPosition app
6.鼠標離開了要隱藏hideTooltips. ide
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <style type="text/css"> #hint{ cursor:pointer; } .tooltip{ margin:8px; padding:8px; border:1px solid blue; background-color:yellow; position: absolute; z-index: 2; } </style> </head> <body> <h1>jQuery tooltips example</h1> <label id="username">Username : </label><input type="text" / size="50"> <span id="hint">hint (mouseover me)</span> <script type="text/javascript"> $(document).ready(function() { var changeTooltipPosition = function(event) { var tooltipX = event.pageX - 8; var tooltipY = event.pageY + 8; $('div.tooltip').css({top: tooltipY, left: tooltipX}); }; var showTooltip = function(event) { $('div.tooltip').remove(); $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>') .appendTo('body'); changeTooltipPosition(event); }; var hideTooltip = function() { $('div.tooltip').remove(); }; $("span#hint,label#username").bind({ mousemove : changeTooltipPosition, mouseenter : showTooltip, mouseleave: hideTooltip }); }); </script> </body> </html>