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.

    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…

  • This works only if your button never uses the disable state. If that happens, then the tooltip can become permanently visible.

Log in to reply