图示:
HTML:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<p><a class="federation"
title="hello sunfishlu, How are you?."
href="http://en.wikipedia.org/wiki/James_T._Kirk">sunfishlu</a>
(2233 - 2293/2371), played by William Shatner, is the leading character in the
original Star Trek TV series and the films based on it. Captain Kirk commanded
the starship <span class="ship">Enterprise</span>
(<a class="federation"
title="Read more about the USS Enterprise (NCC-1701) at Wikipedia, the free encyclopedia."
href="http://en.wikipedia.org/wiki/USS_Enterprise_%28NCC-1701%29">NCC-1701</a>
and later
<a class="federation"
title="Read more about the USS Enterprise (NCC-1701-A) at Wikipedia, the free encyclopedia."
href="http://en.wikipedia.org/wiki/USS_Enterprise_%28NCC-1701-A%29">NCC-1701-A</a>).</p>
每个<a></a>都含有title属性,当鼠标处于<a>上时,我们就会触发事件,产生tooltips。
JavaScript:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var Tooltips =
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
init: function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var links = document.getElementsByTagName("a");//获得一个A数组
for (var i = 0; i < links.length; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var title = links[i].getAttribute("title");//获得title属性的value
//如果title存在
if (title && title.length > 0)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Core.addEventListener(links[i], "mouseover", Tooltips.showTipListener);
Core.addEventListener(links[i], "focus", Tooltips.showTipListener);
Core.addEventListener(links[i], "mouseout", Tooltips.hideTipListener);
Core.addEventListener(links[i], "blur", Tooltips.hideTipListener);
}
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*
* 为了产生tooltips,我们需要创建html内容,一般有两种方式
* 1:通过dom的API
* 2:通过不标准的innerHTML属性
*/
showTip: function(link)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Tooltips.hideTip(link);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var tip = document.createElement("span");
tip.className = "tooltip";
var tipText = document.createTextNode(link.getAttribute("title"));
tip.appendChild(tipText);//把tooltips的文本放在span中
link.appendChild(tip);
//<span class="tooltip">tipText</span>
link._tooltip = tip;
link.title = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// Fix for Safari2/Opera9 repaint issue
//relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置
document.documentElement.style.position = "relative";
},
hideTip: function(link)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (link._tooltip)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
link.title = link._tooltip.childNodes[0].nodeValue;
link.removeChild(link._tooltip);
link._tooltip = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// Fix for Safari2/Opera9 repaint issue
document.documentElement.style.position = "static";
}
},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
showTipListener: function(event)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var link = this;
this._timer = setTimeout(function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Tooltips.showTip(link);
}, 500);
Core.preventDefault(event);
},
hideTipListener: function(event)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
clearTimeout(this._timer);
Tooltips.hideTip(this);
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Core.start(Tooltips);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)