Currently using mouseenter/mouseleave to show a tooltip on icons in a game.

It works but the code can get quick bulky and hard to read vs something like :hover in CSS that just needs 1 line.

Current code ($toolTip is loaded from store):

<div>
    <img class="attack"
        on:mouseenter={() => {$toolTip = "Attack!"}} 
        on:mouseleave={() => {$toolTip = ""}}
        src={attack} alt="hp"/>
</div>

Is there a way to do something like this:

<div>
    <img class="attack"
        toolTip="Attack!"
        src={attack} alt="hp"/>
</div>

and have it swap to the full long code in it’s place?