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