tooltip with dropdown and header, trigger issue
-
The tooltip trigger on a dropdown button only occurs on the open dropdown portion and not on the actual button.
A possible work around is to wrap the dropdown in a div and have the tooltip as sibling of the dropdown.
This works to some degree, however there are potential layout issues that arise when for example if i would want a dropdown in a header to be stretch. It cannot fit the layout correctly.To see the issue correctly, hover over the dropdown to notice.
https://codepen.io/cmcleese/pen/RwrgoNW?editors=1010
If anyone knows how to get the dropdown with div wrapper to fit stretch in a header layout, that might be a way to solve the issue.
-
You can use the label slot of the dropdown, and put the tooltip there, like so:
I’ve modified your codepen to demonstrate… https://codepen.io/MrBeletal/pen/GRqjoEN -
This works only if your button never uses the
disable
state. If that happens, then the tooltip can become permanently visible.