How to use an IconButton as the trigger for Popover?

[janhassel]

I'm running into the issue that I wanna use an IconButton (or another icon-only element) as the trigger for a Popover. To ensure the user understands the action of the icon, a tooltip should appear.
But because the IconButton (as well as Tooltip) is using Popover under the hood a nested Popover is created and causes some issues when rendering, including:

• spacing issues
• the tooltip popover stays open as long as the actual content popover is open

Is there a better/intended way to achieve this behaviour? The "Popover/Tab Tip" story doesn't use a tooltip on the trigger button.

Here is a quick reproduction: https://stackblitz.com/edit/github-yaemgv?file=src%2FApp.jsx

[tay1orjones]

@janhassel I think this will be resolved by #13750

[janhassel]

I just tried it with @carbon/[email protected] and the spacing issue unfortunately remains. It does close now properly though.

https://stackblitz.com/edit/github-yaemgv-vppy9h

[tay1orjones]

@janhassel Sorry for the delay here, looks like a follow up was issued #14200

I'm not seeing the spacing issue anymore

https://stackblitz.com/edit/github-yaemgv-jd41kh?file=package.json

[janhassel]

Works now, thank you!