tips 原生js

//首先是获取元素距离浏览器顶部和左边的距离
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);

}