Angular matTooltip delays :hover effect

I have a list of elements that should be clickable. In order to visualize the element being clickable I implemented a hover effect that turns the cursor into a pointer as well as changing the background of the element.

.selectable:hover{
    cursor: pointer;
    background-color: rgb(237,237,237);
}

But since I want to show the user what will happen when he clicks on the element I have added a matTooltip using angular material.

<div *ngFor="let element of list">
    <span matTooltip="test" class="selectable">
        <span>Lorem</span>
        <span>Ipsum</span>
        <span>Dolor</span>
    </span>
</div>

So what I am noticing right now is that there is a lag between me hovering above the element and the hover effect being displayed.

When I am removing the tooltip everything is working smoothly again.

---

My initial idea was that the delay of the tooltip pauses the hover effect. So I set the showdelay to 0 and hoped that this would fix the problem ... it didn't.

So my next idea would be that the tooltip adds more calculations that are slowing down the website. I'm not sure if this is right (probably not since it is on such a small scale).

Did anyone encountered this problem before or knows about a solution to this?