1.逻辑：在js中判断内容区域是否有隐藏，有隐藏=>鼠标移入则开启tooltip/移出关闭；无隐藏则不执行
2.源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
typet="text/javascript"
src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
></script>
<title>Document</title>
<style>
.container {
position: relative;
width: 500px;
margin: 0 auto;
margin-top: 50px;
}
.nowarp {
width: 250px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.show {
position: absolute;
top: -50px;
padding: 4px 8px;
background: #ccc;
border-radius: 6px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="content"></div>
<div id="tooltip"></div>
</div>
</body>
<script>
var contentBody = document.getElementById("content");
var tooltip = document.getElementById("tooltip");
var listContent = [
"12132132004564654654544654654564654654654",
"12132132010000000000000000000",
"1213213202",
"1213213202",
"1213213202",
];
var str = "";
for (let i = 0; i < listContent.length; i++) {
str +=
"<div class='nowarp' onmouseenter={enter(" +
i +
")} onmouseleave={leave(" +
i +
")}>" +
listContent[i] +
"</div>";
}
contentBody.innerHTML = str;
var list = $(".nowarp");
enter = (index) => {
let height = index * list[index].offsetHeight - 50;
if (list[index].offsetWidth < list[index].scrollWidth)
$("#tooltip").removeClass("hidden");
tooltip.innerHTML =
"<div id='tooltip" +
index +
"' class='show' style='top:" +
height +
"px;'>" +
list[index].innerText +
"</div>";
};
leave = (index) => {
$("#tooltip").addClass("hidden");
};
</script>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
