Issue with scrollWidth always being 0 when using ellipsis property for tooltips

I’m trying to create a tooltip that shows the full text when content is truncated using the ellipsis property. However, I’m facing an issue where scrollWidth is always returning 0. Here’s my JavaScript and CSS code

var shiftName = findNameById(userResponse.shiftId);
replaceText(WelcomeUser, LoginUserName.split("@")[0]);
var LoggedAsTestingLongText = "[email protected]";
replaceText(LoggedAs,LoggedAsTestingLongText);
var usernameDiv = document.querySelector(".elipsiss.username");
LoggedAs.title=LoggedAsTestingLongText;
if (LoggedAs.offsetWidth < LoggedAs.scrollWidth) {
    console.log(LoggedAs.offsetWidth + " offsetwidth");
    console.log(LoggedAs.scrollWidth + " scroll width");
    console.log("scroll width");
    LoggedAs.classList.add("tooltip");
}
usernameDiv.addEventListener("mouseenter", function () {
    if (!LoggedAs.classList.contains("tooltip")) {
        LoggedAs.removeAttribute("title");
        console.log("mouse enter");
    }
});

.elipsiss.username{
    //display : block;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.tooltip[title]:hover::before {
    content: attr(title);
    background-color: yellow; /* Just for testing */
    color: rgb(148, 0, 0);
}

I’ve applied the ellipsis property to an element with class .elipsiss.username and added a tooltip to show the full text when the content is truncated. However, I noticed that the scrollWidth property is always returning 0, preventing the tooltip from appearing as expected. I suspect there might be an issue with the timing of when the code is executed or some interaction with other CSS rules.

Has anyone encountered a similar problem with scrollWidth returning 0 in this context? Are there any alternative methods or suggestions for achieving the desired tooltip behavior when using the ellipsis property?