How to add an anchor inside of a tooltip?

[chjpark]

Hi,

I want to add an Anchor component inside of a Tooltip. Is there a way I can do with via props or nesting that inside the Tooltip component?

[aayushpi]

Hi!

It is not possible to add actions inside a tooltip. This is because tooltips are typically accessed only with hover or focus interaction. In these cases, it may be difficult to reach the action without dismissing the tooltip. If you would like to attach an action to a non-modal-dialog, we recommend the Popover component.

[ammehta27]

I have a tooltip that had a link inside so I am replacing it with a Popover in order to be able to keep the link. What do you recommend I replace the info icon with?

In the Paste guidelines, the two alternatives that come close are a borderless icon button or an icon badge button however it breaks the consistency on the rest of the page that have info icons with tooltips. See icon next to "Call status changes".

[nkrantz]

Hi @ammehta27! I understand your concern with breaking the consistency of the rest of the page with the Icon/Tooltip pattern, but for this specific case, because the interaction is different, we do want some sort of visual cue to differentiate the Popover from the Tooltips. The PopoverBadgeButton is going to be your best bet here and will allow the user to click into the link in your Popover. Let us know how it goes!

[ammehta27]

Thanks! Is it ok to use the PopoverBadgeButton without text and only an icon?

[nkrantz]

The Badge should have text inside (see Badge guidelines here) so "info" or "more" as you put it would work well.

[nkrantz]

Hi again @ammehta27 - one more suggestion from the DSYS team. When the pop-up has any interaction, it should be a Popover, but a pop-up with no interaction doesn't necessarily need to be a Tooltip. In order to achieve your desired consistency across the different help/more info icons, you could convert all of the Tooltips to Popovers. That way, the user will have to click on each one to see its contents, even if there are no links or interactions. It would also allow you to add interactive content easily in the future where you currently have Tooltips, without having to change the design.