How do you remove the tooltip after clicking a button

[kferguson60]

I am using Svelte with picoscss. I added tooltips to a button element but on clicking the button, the button remains "down" (selected) with the tooltip remaining until a mouse click elsewhere on the page. How do I make the button release after clicking and consequently, I assume the tooltip will disappear? Alternatively, how to make the tooltip only active during hover. Here is the HTML of the button.

<button data-tooltip="Stop any active haul process on the stream multiplier" on:click={() => StopStreamx()}>Stop

[gelie]

I used CSS to hide the tooltip before/after focus. In my styles.css I have :

[data-tooltip]:focus::before {
    opacity: 0;
}

[data-tooltip]:focus::after {
    opacity: 0;
}

This worked for me. It is crude, you can add a transition if you want to. `

[kferguson60]

It seems to mostly work but once the button is clicked, when the mouse hovers, the tooltip flashes on briefly before disappearing. I would like the tooltip to behave the same (show during hover) regardless of the state of the button. I am using Chrome

[kferguson60]

A colleague modified it a bit to include the hover and it appears to work as required:

[data-tooltip]:focus::after,
[data-tooltip]:focus::before {
	opacity: 0;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
	opacity: 1;
}

[tilleul]

This worked for me but I added !important after the opacity value.
On the other hand this breaks the display of the tooltip when using keyboard controls/assistive tech to move focus from control to control ...
Probably a better solution is to blur() (unfocus) the button once clicked and/or move the focus to the next useful control.