html添加tooltip
宦书
需求：给表单每个信息项添加一个帮助信息，当mouseover或focus时激活帮助信息
效果：
程序实现：
/*
2007-01-30 lisq custom tooltip
use age:
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/tooltip.js"></script>
var config = new ToolTip.Config($('A0101'), '人员姓名', 400)
var arrConfig = []
arrConfig.push(config)
var tootip = ToolTip.Init(arrConfig)
*/
Event.observe(window, 'load', function (){
var div = document.createElement('div')
div.id = 'ToolTipID'
var divIntroTopLine = document.createElement('div')
divIntroTopLine.id = 'divIntroTopLine'
div.appendChild(divIntroTopLine)
var divIntroArrow = document.createElement('div')
divIntroArrow.id = 'divIntroArrow'
divIntroTopLine.appendChild(divIntroArrow)
var divIntroContent = document.createElement('div')
divIntroContent.id = 'divIntroContent'
divIntroContent.innerHTML = 'hello world'
div.appendChild(divIntroContent)
ToolTip.Container = div
ToolTip.ContainerContent = divIntroContent
document.body.appendChild(div)
Element.hide(div)
}, false )
var ToolTip = {
Config : function (ele, tip, width){
this .ele = ele
ele.config = this
this .tip = tip
this .width = width
},
Init : function (arrConfig){
for ( var i = 0 ; i < arrConfig.length; i ++ ){
var config = arrConfig[i]
if ( ! config || ! config.ele || ! config.tip)
continue
config.ele.tip = config.tip
config.ele.onmouseover = ToolTip.MouseOver
config.ele.onmouseout = ToolTip.MouseOut
config.ele.onfocus = ToolTip.MouseOver
config.ele.onblur = ToolTip.MouseOut
}
},
MouseOver : function (){
ToolTip.Container.style.width = this .config.width
ToolTip.ContainerContent.innerHTML = this .tip
var arr = Position.positionedOffset( this )
eToolTip = $('ToolTipID')
eToolTip.style.left = arr[ 0 ] - 50
eToolTip.style.top = arr[ 1 ] + 21
Element.show(eToolTip)
},
MouseOut : function (){
eToolTip = $('ToolTipID')
Element.hide(eToolTip)
}
}
2007-01-30 lisq custom tooltip
use age:
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/tooltip.js"></script>
var config = new ToolTip.Config($('A0101'), '人员姓名', 400)
var arrConfig = []
arrConfig.push(config)
var tootip = ToolTip.Init(arrConfig)
*/
Event.observe(window, 'load', function (){
var div = document.createElement('div')
div.id = 'ToolTipID'
var divIntroTopLine = document.createElement('div')
divIntroTopLine.id = 'divIntroTopLine'
div.appendChild(divIntroTopLine)
var divIntroArrow = document.createElement('div')
divIntroArrow.id = 'divIntroArrow'
divIntroTopLine.appendChild(divIntroArrow)
var divIntroContent = document.createElement('div')
divIntroContent.id = 'divIntroContent'
divIntroContent.innerHTML = 'hello world'
div.appendChild(divIntroContent)
ToolTip.Container = div
ToolTip.ContainerContent = divIntroContent
document.body.appendChild(div)
Element.hide(div)
}, false )
var ToolTip = {
Config : function (ele, tip, width){
this .ele = ele
ele.config = this
this .tip = tip
this .width = width
},
Init : function (arrConfig){
for ( var i = 0 ; i < arrConfig.length; i ++ ){
var config = arrConfig[i]
if ( ! config || ! config.ele || ! config.tip)
continue
config.ele.tip = config.tip
config.ele.onmouseover = ToolTip.MouseOver
config.ele.onmouseout = ToolTip.MouseOut
config.ele.onfocus = ToolTip.MouseOver
config.ele.onblur = ToolTip.MouseOut
}
},
MouseOver : function (){
ToolTip.Container.style.width = this .config.width
ToolTip.ContainerContent.innerHTML = this .tip
var arr = Position.positionedOffset( this )
eToolTip = $('ToolTipID')
eToolTip.style.left = arr[ 0 ] - 50
eToolTip.style.top = arr[ 1 ] + 21
Element.show(eToolTip)
},
MouseOut : function (){
eToolTip = $('ToolTipID')
Element.hide(eToolTip)
}
}
调用：
var
config
=
new
ToolTip.Config(fieldInput, field.HelpInfo,
150
)
ToolTip.Init([config])
ToolTip.Init([config])
第二种方法：
JavaScript部分tooltip.js
//添加支持，如为某DIV则仅为该DIV中带有TOOLTIP属性的元素提供支持。
function addTipSupport(e) {
e.onmouseover = showTip;
e.onmouseout = hideTip;
e.onmousemove = showTip;
}
//获得控件的绝对位置，返回左上角坐标
function getElePos(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return [l, t];
}
//显示TOOLTIP
function showTip() {
getElePos(event.srcElement);
if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
altlayer.style.visibility='visible';
var cord = getElePos(event.srcElement);
altlayer.style.left=cord[0]+event.offsetX + 20; //据左显示的位置
altlayer.style.top=cord[1]+event.offsetY+25; //据上显示的位置
altlayer.innerHTML=event.srcElement.tooltip;
altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
}
//else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
altlayer.style.visibility = 'hidden';
}
//设置显示区域
addTipSupport(document.body); //此处的参数可换成其它，以局限在某容器内支持TOOLTIP风格。
//Tooltip结束//
function addTipSupport(e) {
e.onmouseover = showTip;
e.onmouseout = hideTip;
e.onmousemove = showTip;
}
//获得控件的绝对位置，返回左上角坐标
function getElePos(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return [l, t];
}
//显示TOOLTIP
function showTip() {
getElePos(event.srcElement);
if(event.srcElement.tooltip && event.srcElement.tooltip!='') {
altlayer.style.visibility='visible';
var cord = getElePos(event.srcElement);
altlayer.style.left=cord[0]+event.offsetX + 20; //据左显示的位置
altlayer.style.top=cord[1]+event.offsetY+25; //据上显示的位置
altlayer.innerHTML=event.srcElement.tooltip;
altlayer.style.zIndex = event.srcElement.style.zIndex + 1;
}
//else altlayer.style.visibility='hidden';
}
//隐藏TOOLTIP
function hideTip() {
altlayer.style.visibility = 'hidden';
}
//设置显示区域
addTipSupport(document.body); //此处的参数可换成其它，以局限在某容器内支持TOOLTIP风格。
//Tooltip结束//
html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tooltip</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tooltip</title>
<script type="text/javascript" src="tooltip.js"></script>
</head>
<body>
<div style="visibility:hidden;border:2px groove orange;padding:5px;font-size:12px;background-color:#990000;position:absolute;" id=altlayer></div>
</head>
<body>
<div style="visibility:hidden;border:2px groove orange;padding:5px;font-size:12px;background-color:#990000;position:absolute;" id=altlayer></div>
<!-- 这里的tooltip即是要显示到id为altlayer的div中的内容 -->
<img src="http://www.baidu.com/img/logo-yy.gif" tooltip="It's a multiline tooltip!<br>And you can use pictures too! < br><img src='http://www.baidu.com/img/logo-yy.gif'/>" οnmοuseοver="showTip()" οnmοuseοut="hideTip()" >
</img>
</body>
</html>
</body>
</html>
类似资料：