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);
???
}