文章的关键字获得焦点显示提示内容，关键字失去焦点隐藏提示内容

一般文章中都会有些术语或者概念较深刻的词，大家看不懂。很多人都会选择给这些关键字加个超链接，跳到另一个页面查看他的内容，从SEO的角度看有利，但这样其实很不友好。本文教大家一个方法：给超链接加个注释信息，鼠标获得焦点显示提示信息，鼠标失去焦点，隐藏该提示信息。很方便的喔~

以下是脚本内容：

<script type="text/javascript">

//显示提示内容

function showHelpTip(e, sHtml, bHideSelects) {

// find anchor element
var el = e.target || e.srcElement;
while (el.tagName != "A")
el = el.parentNode;

// is there already a tooltip? If so, remove it
if (el._helpTip) {
helpTipHandler.hideHelpTip(el);
}

helpTipHandler.hideSelects = Boolean(bHideSelects);

// create element and insert last into the body
helpTipHandler.createHelpTip(el, sHtml);

// position tooltip
helpTipHandler.positionToolTip(e);

// add a listener to the blur event.
// When blurred remove tooltip and restore anchor
el.onblur = helpTipHandler.anchorBlur;
el.onkeydown = helpTipHandler.anchorKeyDown;
}

//隐藏提示内容
function hidenHelpTip(e) {
// find anchor element
var el = e.target || e.srcElement;
while (el.tagName != "A")
el = el.parentNode;

// is there already a tooltip? If so, remove it
if (el._helpTip) {
helpTipHandler.hideHelpTip(el);
}

}

var helpTipHandler = {
hideSelects:	false,

helpTip:		null,

showSelects:	function (bVisible) {
if (!this.hideSelects) return;
// only IE actually do something in here
var selects = [];
if (document.all)
selects = document.all.tags("SELECT");
var l = selects.length;
for	(var i = 0; i < l; i++)
selects[i].runtimeStyle.visibility = bVisible ? "" : "hidden";
},

create:	function () {
var d = document.createElement("DIV");
d.className = "help-tooltip";
d.onmousedown = this.helpTipMouseDown;
d.onmouseup = this.helpTipMouseUp;
document.body.appendChild(d);
this.helpTip = d;
},

createHelpTip:	function (el, sHtml) {
if (this.helpTip == null) {
this.create();
}

var d = this.helpTip;
d.innerHTML = sHtml;
d._boundAnchor = el;
el._helpTip = d;
return d;
},

// Allow clicks on A elements inside tooltip
helpTipMouseDown:	function (e) {
var d = this;
var el = d._boundAnchor;
if (!e) e = event;
var t = e.target || e.srcElement;
while (t.tagName != "A" && t != d)
t = t.parentNode;
if (t == d) return;

el._onblur = el.onblur;
el.onblur = null;
},

helpTipMouseUp:	function () {
var d = this;
var el = d._boundAnchor;
el.onblur = el._onblur;
el._onblur = null;
el.focus();
},

anchorBlur:	function (e) {
var el = this;
helpTipHandler.hideHelpTip(el);
},

anchorKeyDown:	function (e) {
if (!e) e = window.event
if (e.keyCode == 27) {	// ESC
helpTipHandler.hideHelpTip(this);
}
},

removeHelpTip:	function (d) {
d._boundAnchor = null;
d.style.filter = "none";
d.innerHTML = "";
d.onmousedown = null;
d.onmouseup = null;
d.parentNode.removeChild(d);
//d.style.display = "none";
},

hideHelpTip:	function (el) {
var d = el._helpTip;
/*	Mozilla (1.2+) starts a selection session when moved
and this destroys the mouse events until reloaded
d.style.top = -el.offsetHeight - 100 + "px";
*/

d.style.visibility = "hidden";
//d._boundAnchor = null;

el.onblur = null;
el._onblur = null;
el._helpTip = null;
el.onkeydown = null;

this.showSelects(true);
},

positionToolTip:	function (e) {
this.showSelects(false);
var scroll = this.getScroll();
var d = this.helpTip;

// width
if (d.offsetWidth >= scroll.width)
d.style.width = scroll.width - 10 + "px";
else
d.style.width = "";

// left
if (e.clientX > scroll.width - d.offsetWidth)
d.style.left = scroll.width - d.offsetWidth + scroll.left + "px";
else
d.style.left = e.clientX - 2 + scroll.left + "px";

// top
if (e.clientY + d.offsetHeight + 18 < scroll.height)
d.style.top = e.clientY + 18 + scroll.top + "px";
else if (e.clientY - d.offsetHeight > 0)
d.style.top = e.clientY + scroll.top - d.offsetHeight + "px";
else
d.style.top = scroll.top + 5 + "px";

d.style.visibility = "visible";
},

// returns the scroll left and top for the browser viewport.
getScroll:	function () {
if (document.all && typeof document.body.scrollTop != "undefined") {	// IE model
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
return {
left:	cont.scrollLeft,
top:	cont.scrollTop,
width:	cont.clientWidth,
height:	cont.clientHeight
};
}
else {
return {
left:	window.pageXOffset,
top:	window.pageYOffset,
width:	window.innerWidth,
height:	window.innerHeight
};
}

}

};

</script>

然后为文章的超链接，调用相关的函数就可以实现了：

<a onmouseout="hidenHelpTip(event);"
onmouseover="showHelpTip(event, 'Normally we would ship out PAL or NTSC version camera according to different countries. For example, we would ship out PAL camera to United Kingdom, Australia, German, France and etc; we would
ship out NTSC camera to United States, Canada and etc. If you want to specify PAL or NTSC camera, you could leave us a note to “Order Instructions/Comments” when checking out.'); return false;" class="HelpLink">PAL/NTSC</a>