I’m trying to show the tooltip for the strings which width overflows the container and applying ellipses .
problem is when the string scrollwidth exactly matches with container offsetWidth , the ellipses is applying but the tooltip is not showing . how to handle this edge case.
<div
class="pl-0 pr-0 pt-0 pb-0 device_item_text"
@mouseover=" onmouseover_tooltip($event)"
v-b-tooltip.noninteractive.hover.top
:title="tooltipEnable ? '9NAS6DBACE-4TB' : ''"
>
9NAS6DBACE-4TB
</div>
.device_item_text {
text-align: left;
padding-bottom: 0;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: black;
max-width: 100px;
}
my js method:
onmouseover_tooltip(event) {
let div = event.target;
if (div.scrollWidth > div.offsetWidth) {
this.tooltipEnable = true;
}
else {
this.tooltipEnable = false;
}
}