html添加tooltip

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

需求：給表單每個資訊項添加一個協助資訊，當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)
    }
}

調用：

var config = new ToolTip.Config(fieldInput, field.HelpInfo, 150)
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結束//////////

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><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>
<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'/>" onmouseover="showTip()" onmouseout="hideTip()" ></img>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

html添加tooltip

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support