function textRange(el: any) {
const textContent = el;
const targetW = textContent.getBoundingClientRect().width;
const range = document.createRange();
range.setStart(textContent, 0);
range.setEnd(textContent, textContent.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
return rangeWidth > targetW;
}
function isShowToltip(e: any, index: any) {
const bool = textRange(e.target);
AssessmentPlanList.value[index].isShow = bool;
}
function hideTip(index: any) {
AssessmentPlanList.value[index].isShow = false;
}
//templete
<div
class="text-truncate flex-1 w-[100%]"
@mouseenter="(e) => isShowToltip(e, index)"
v-if="!item.isShow"
@mouseout="hideTip(index)"
>
{{ item.planName }}
</div>
<el-tooltip
placement="top"
append-to="#scroll-panel"
v-if="item.isShow"
:show-after="200"
>
<template #content>
<div class="w-[450px]">{{ item.planName }}</div>
</template>
<div class="text-truncate flex-1 w-[100%]">
{{ item.planName }}
</div>
</el-tooltip>
处理文字超长鼠标移入提示全内容,未超过固定长度就不提示 ----方法待校验
于 2023-11-16 10:51:04 首次发布
文章介绍了如何在HTML元素上使用JavaScript函数textRange和isShowToltip来控制文本是否显示tooltip,以及hideTip函数用于隐藏提示。通过mouseenter和mouseout事件处理程序,实现了鼠标悬停时显示详细描述的动态效果。
摘要由CSDN通过智能技术生成