JavaScript提示框插件（tooltip）

最新推荐文章于 2025-06-27 12:09:55 发布

原创最新推荐文章于 2025-06-27 12:09:55 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #插件 #tooltip #web前端开发 #web开发

JavaScript从入门到精通专栏收录该内容

147 篇文章

订阅专栏

本文介绍了一个使用纯CSS实现元素定位的例子，并通过JavaScript为网页元素添加了鼠标悬停时显示提示信息的功能。该功能包括创建提示框、设置样式及通过事件监听管理提示框的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            list-style: none;
        }

        #box{
            position:relative;
            width:400px;
            height:300px;
            background-color: brown;
        }

        #box2{
            position:relative;
            width:600px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <br/><br/><br/><br/>
    <div id="box2">

    </div>
</body>
</html>

<script type="text/javascript">

function $(id){
    return document.getElementById(id);
}

function ToolTip(obj){
    let defaultObj = {
        "domObj":document.body,
        "width":100,
        "height":30,
        "bgcolor":"#f1f1f1",
        "color":"#600000",
        "fontSize":"14px",
        "border":"1px solid black",
        "title":"暂时无提示信息",
        "isRadius":true
    };
    for(let key in obj){
        defaultObj[key] = obj[key];
    }
    //给属性赋值
    for(let key in defaultObj){
        this[key] = defaultObj[key];
    }
    this.initEvent();
}

ToolTip.prototype.createUI=function () {
    //给父元素增加定位
    this.domObj.style.position="relative";
    //1、创建div，显示
    this.toolTipDom = document.createElement("div");
    this.toolTipDom.id = "tooltipId";
    this.toolTipDom.style.cssText="position:absolute";
    this.toolTipDom.style.left = (this.domObj.offsetWidth-this.width)/2+ "px";
    this.toolTipDom.style.top = (this.domObj.offsetHeight-this.height)/2+"px";
    this.toolTipDom.style.width = this.width+"px";
    this.toolTipDom.style.height =this.height+ "px";
    this.toolTipDom.style.backgroundColor=this.bgcolor;
    this.toolTipDom.style.color =this.color;
    this.toolTipDom.style.fontSize =this.fontSize;
    this.toolTipDom.style.border =this.border;
    if(this.isRadius){
        this.toolTipDom.style.borderRadius = "5px";
    }
    this.toolTipDom.innerHTML = this.title;
    this.domObj.appendChild(this.toolTipDom);
}

ToolTip.prototype.removeUI=function () {
    this.domObj.removeChild(this.toolTipDom);
}

ToolTip.prototype.initEvent=function(){
    this.domObj.onmouseover = (event)=>{
        let evt = event || window.event;
        //如果目的地是toolTipDom元素的话，说明是进入了子元素，不添加提示框
        if(evt.toElement==this.toolTipDom){
            return;
        }
        this.createUI();
    }
    this.domObj.onmouseout = (event)=>{
        let evt = event || window.event;
        //如果目的地是toolTipDom元素的话，说明是离开父元素进入了子元素，不删除提示框
        if(evt.toElement==this.toolTipDom){
            return;
        }
        this.removeUI();
    }
}

window.onload = function () {
    new ToolTip({"domObj":$("box")});
}
</script>