JS implementation stays in the interface prompt box-JS Tutorial-php.cn

JS implementation stays in the interface prompt box

php中世界最好的语言

Release： 2018-05-02 11:47:45

Original

1865 people have browsed it

This time I will bring you JS implementation to stay in the interface prompt box. What are the precautions for JS implementation to stay in the interface prompt box. The following is a practical case, let's take a look.

Business scenario: When the mouse moves into an element, a prompt box is displayed for introduction. It will automatically disappear when the mouse is removed. Introduce ToolTip.js and ToolTip.css

Main method: ToolTip.show (id of the element to be prompted, as long as it is not repeated, html text to be prompted, width (optional), height (optional) );

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

The effect is as follows:

1. Display text:

2: Display pictures

3: Display website

js code: 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("p");
  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;
})();//为防止污染，将方法写在匿名函数中

Copy after login

html code: F:\Html5\Plugins\ToolTip\ToolTip.html

提示框

唐诗

背景图片

Yi人诗社

Copy after login

css code: 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;
}

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!