tips 原生js

最新推荐文章于 2022-11-29 14:24:53 发布

转载最新推荐文章于 2022-11-29 14:24:53 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zjpzjp/p/7542302.html

本文介绍了一种使用JavaScript和CSS实现鼠标悬浮时显示提示框的方法。通过获取元素位置并动态设置提示框样式，确保提示信息能准确显示在鼠标附近。

//首先是获取元素距离浏览器顶部和左边的距离
function getPos(obj) {

var pos = {left:0, top:0};

while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}

return pos;

}
//创建一个div 用来当做tips  存放内容
var div = document.createElement('div');

//that 指的是鼠标浮动时的元素  title指tips显示的内容  赋给div用的

function setTips(that,title){
var pos = getPos(that);
var maxWidth = 0 ;
var minWidth = 0 ;
var sreenX = window.innerWidth;
var sreenY = window.innerHeight;
var x = pos.left;
var y = pos.top;
var h = $(that).height();
var w = $(that).width();

div.innerHTML = title;
div.className = 'tip';
div.style.position = 'absolute';
div.style.top = y + h + 10 +'px';
div.style.left = x + (parseInt(w/8)) +'px';
maxWidth = sreenX - (x + (parseInt(w/8)));
div.style.maxWidth = maxWidth +'px';
div.style.zIndex = 100;
// console.log(e.screenX,e.screenY);
document.body.appendChild(div);
}

css部分

.tip{
width:auto;
height:auto;
background: #fff;
color:#000;
padding:3px;
border:1px solid #ddd;
border-radius:3px;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
background-image: radial-gradient(circle,rgba(246,247,243,0.9),rgba(246,247,243,1.0));
}
.tip:before {
position: absolute;
top: -4px;
left: calc(10% - 5px);
width: 10px;
height: 10px;
background: rgba(246,247,243,1.0);
box-shadow: -2px -2px 0 -1px #c4c4c4;
content: "";
transform: rotate(45deg);

}