I want to display some field info for every record when the user hovers mouse on the respective record name using tooltip but I'm unable to think about a logic to do so.

I want the tooltip to only occupy the div space when focus is on the icon associated with it and when tooltip be active it doesn't affect other div elements placement on the screen.
The screenshot(not the content present in it and the close button) is what I'm trying to create.

In this code every time I'm hovering the mouse on a record the topmost row in the component is getting highlighted instead of the corresponding row on which the mouse is hovered. Any suggestion will be appreciated.

HTML file snippet

<template for:each={actions} for:item="action">
            <div class="slds-p-vertical_xxx-small box" key={action.Id} id={action.Id} onmouseover={addColor} onmouseout={removeColor}>
                <div class="slds-p-left_medium">
                    {action.Name}
                </div>
            </div>
</template>

JS File snippet

addColor() {
    this.template.querySelector('.box').classList.add('highlight');
}

removeColor() {
    this.template.querySelector('.box').classList.remove('highlight');
}

CSS File

.highlight {
background-color: rgb(243, 242, 242);
}

Screenshot

Here I've my mouse pointed on 'Action 3' record but the 'Action 1' is getting highlighted.