How to add tooltip for dropdown button?

[mato-a]

How to add tooltip for dropdown button so that it shows on both mouse hover and keyboard focus?

In this example dropdown button is not rendered (probably missing slot=trigger in direct child element):

<sl-dropdown>
	<sl-tooltip content="Choose language">
		<sl-button slot="trigger" variant="text" size="small">
			<span class="fa-solid fa-globe"></span>
		</sl-button>
	</sl-tooltip>
	<sl-menu>
            ...
	</sl-menu>
</sl-dropdown>

In this example dropdown is visible, but tooltip appears only on mouse hover, not on keyboard focus:

<sl-dropdown>
	<sl-button slot="trigger" variant="text" size="small">
		<sl-tooltip content="Choose language">
			<span class="fa-solid fa-globe"></span>
		</sl-tooltip>
	</sl-button>
	<sl-menu>
            ...
	</sl-menu>
</sl-dropdown>

I guess I could use the second example with manual trigger, but isn't there a simpler way?

[claviska]

Tooltips currently have to wrap their target element, and slotted elements have to be a direct descendent of their host element.

In short, wrap the button with a tooltip and move the slot attribute from the button to the tooltip. There's one other catch, though. Tooltips use display: contents by default so their position can't be measured as usual. To fix that, apply style="display: inline-block" as shown in this example.

https://codepen.io/claviska/pen/PogRyGO?editors=1100

I hope that helps!

[mato-a]

That fixed it! Thanks a lot!

How about for the future adding anchor attribute to tooltip to specify which element the tooltip is attached to? Something like in FAST.

[claviska]

That’s the plan :)