html提示框脚本,JavaScript实现短暂提示框功能

业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css

主方法：ToolTip.show(需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽(可不指定), 高(可不指定));

ToolTip.show(obj, id, html, width, height);

效果如下：

1.显示文本：

2:显示图片

3:显示网站

js代码：F:\Html5\Plugins\ToolTip\js\ToolTip.js

(function () {

var ToolTip = {};

/**

* 显示函数

*/

ToolTip._showTip = function (parentId, childId, html, width, height) {

var parent = document.getElementById(parentId)//要提示的元素

var child = document.getElementById(childId);

if (child === null) {//创建

var toolTip = document.createElement("div");

toolTip.classList = "ui-tooltip-box";

toolTip.id = childId;

toolTip.innerHTML = html;

parent.appendChild(toolTip);

toolTip.style.width = width ? width + "px" : "auto"

toolTip.style.height = height ? height + "px" : "auto"

//定位：

toolTip.style.position = "absolute";

toolTip.style.display = "block";

var left = parent.offsetLeft;

var top = parent.offsetTop;

if (left + toolTip.offsetWidth > document.body.clientWidth) {

left = document.body.clientWidth / 2;

}

toolTip.style.left = left + "px";

toolTip.style.top = top + 20 + "px";

parent.onmouseleave = function (ev) {

setTimeout(function () { //延迟：

document.getElementById(childId).style.display = "none";//隐藏

}, 300);

}

} else {

//显示

document.getElementById(childId).style.display = "block";

}

},

/**

* 调用入口

*/

ToolTip.show = function (parentId, childId, html, width, height) {

var parent = document.getElementById(obj)

parent.onmouseenter = function (ev) {

ToolTip._showTip(parentId, childId, html, width, height)

}

}

window.ToolTip = ToolTip;

})();//为防止污染，将方法写在匿名函数中

html代码：F:\Html5\Plugins\ToolTip\ToolTip.html

提示框

唐诗

背景图片

Yi人诗社

//调用方式

ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" +

"。唐诗是中华民族最珍贵的文化遗产之一，是" +

"中华文化宝库中的一颗明珠，" +

"同时也对世界上许多民族和国家的文化发展产生了很大影响，" +

"对于后人研究唐代的政治、民情、风俗、" +

"文化等都有重要的参考意义和价值。",300,90);

ToolTip.show("tooltip-photo", "02", "",150,80);

var html=''

ToolTip.show("tooltip-poem", "03", html);

css代码：F:\Html5\Plugins\ToolTip\ToolTip.css

body {

font-size: 14px;

line-height: 1.8;

background-image: url("imgs/bg.jpg");

}

.ui-tooltip-demo {

width: 500px;

margin: 30px auto;

padding: 20px 30px;

background-color: rgba(100%, 100%, 100%, 0.4);

border-radius: 10px;

text-align: center;

box-shadow: 2px 1px 0px 3px rgba(0, 0, 0, 0.2);

}

.ui-tooltip-demo .ui-tooltip {

color: #03f;

font-size: 18px;

cursor: help;

}

.ui-tooltip-box {

display: block;

background: #fff;

line-height: 1.6;

border: 1px solid #6cf;

color: #333;

padding: 20px;

font-size: 12px;

border-radius: 5px;

overflow: auto;

}

总结

以上所述是小编给大家介绍的JavaScript实现短暂提示框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！