JavaScript 实现文本溢出时的 hover 气泡效果

<div class="container">
<p id="text" title="">这是一段可能会超出容器范围的文字...</p>
</div>

<style scoped>
.container {
width: 200px; /* 假设这里的宽度有限 */
border:1px solid #ccc;
}
#text{
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.tooltip {
position:absolute;
background-color:#fff;
padding:5px;
box-shadow: 0 0 3px rgba(0,0,0,.4);
display:none;
}
</style>

window.onload = function() {
var container = document.querySelector('.container');
var txtNode = document.getElementById('text');

// 判断是否需要 tooltip
if (txtNode.offsetWidth < txtNode.scrollWidth) {

// 创建并设置 tooltip 的 HTML 结构
let toolTipText = document.createElement("span");
toolTipText.classList.add('tooltip');
toolTipText.textContent = txtNode.innerText;

// 将 tooltip 添加到 DOM 中，并定位它相对于 'text' 元素的位置
container.appendChild(toolTipText);

const showTooltip = () => {
let rect = txtNode.getBoundingClientRect();

toolTipText.style.display = "block";
toolTipText.style.left = `${rect.right}px`;
toolTipText.style.top = `${rect.bottom + window.pageYOffset - parseInt(getComputedStyle(txtNode).fontSize)}px`;
};

const hideTooltip = () => {
toolTipText.style.display = "none";
};

// 鼠标 Hover 上去和离开事件绑定处理函数
txtNode.addEventListener('mouseover',showTooltip,false);
txtNode.addEventListener('mouseout',hideTooltip,false);
}
};