JavaScript实现短暂提示框功能的方法

这篇文章主要介绍了JavaScript实现短暂提示框功能的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联公司专注于企业全网整合营销推广、网站重做改版、阿克塞哈萨克族自治网站定制设计、自适应品牌网站建设、HTML5、购物商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为阿克塞哈萨克族自治等各大城市提供网站开发制作服务。

业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入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人诗社