基本概念: 首先你要先為網頁元件指派 mouseover 及 mouseout 事件處理動作。接著在 mouseover 處理動作中，要找出網頁元件在頁面的 position 以及長寬，以便計算提示文字呈現時的位置。不幸的是，網頁元件的position及長寬的求法有些複雜。從頭寫一個提示文字功能煩了點。
所幸這個看似簡單實則複雜的功能，有許多javascript framework都實作了。你應該直接選一套來用。我以
YUI (Yahoo! UI Library) 示範一下。Manual:
Yahoo! UI Library: Tooltip
跟上面的純 html 例子一樣，但要為網頁元件指定 ID。
<p id="tip1" title="提示1">某一行</p>
<div><span id="tip2" title="提示2">某一行</span></div>
<table><tr><td id="tip3" title="提示3">某一格</td></tr></table>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>
<script type="text/javascript">
var myTooltip = [];
myTooltip['tip1'] = new YAHOO.widget.Tooltip("myTooltip1", { context:"tip1", showdelay:0 } );
myTooltip['tip2'] = new YAHOO.widget.Tooltip("myTooltip2", { context:"tip2", showdelay:0 } );
myTooltip['tip3'] = new YAHOO.widget.Tooltip("myTooltip3", { context:"tip3", showdelay:0 } );
</script>
note.jpg (1,640.68 KB)
工具箱
