How to stop sl-tooltip blocking/getting in the way of clicking items below it

[andrewdenham]

We use the sl-icon-button to trigger a menu below it in a navbar at the top of a page (note this problem also exists when using an sl-icon-button in a sl-dropdown). Because of it's position the tooltip for the button displays below the button but when hovering on the first menu item, so outside of the button, the tooltip is still displayed and prevents you from clicking on the menu-item.

It seems as if it's related to the hover-bridge addition. Is there a way to turn this off or prevent this from happening and the tooltip working the same way as a title would. So as soon as you hover outside of the button the tooltip disappears?
#1734 (comment)

[claviska]

Could you post an example so I can take a look?

The hover bridge isn't currently exposed as a part you can hook into, and I think we'd need to see a really convincing use case that we should allow disabling it as its primary existence is to ensure users can hover over the tooltip without it disappearing. This especially helps users with on-screen magnifiers who otherwise wouldn't be able to read it.

[andrewdenham]

Apologies, I can't seem to recreate the exact issue I'm describing, but in trying it I still cannot create a dropdown with a sl-button with an icon or sl-icon-button that has a tooltip as the outside element has to have the slot="trigger", which means tooltip is attached to the dropdown. See example: https://codepen.io/andydenham/pen/emYrOwq?editors=1000

[claviska]

Got it. The problem in that last example is a bit of an edge case. The dropdown is trying to calculate the position of the trigger, but the trigger is a tooltip with display: contents that, per spec, means it doesn't return values when inspecting its coordinates. That causes the dropdown to render in the wrong place.

You can work around it by adding the following styles to the tooltip(s) in question:

sl-tooltip {
  display: inline-flex; 
}

Aside: in Shoelace 3 ("Web Awesome"), the tooltip API no longer wraps the trigger, allowing you to put it anywhere in the same document, meaning this will be a non-issue soon.

<wa-tooltip for="my-button">This is a tooltip</wa-tooltip>
<wa-button id="my-button">Hover Me</wa-button>