Popover mouseOver

[chjpark]

Does the Popover allow override to the onClick event to show the Popover? I'd like to be able to show a Popover when I over over an element that is associated with a Popover.

[serifluous]

Hey @chjpark ! Can you share (screenshot, codesandbox, etc) what you're trying to use to trigger the popover, and what content is in the popover?

Since Popover is a type of dialog, it must be triggered by an explicit user action like a click, and not hover.

If you need something similar to show up on hover, you can use a Tooltip. However Tooltips can have only text in them, so depending on your use case, that might not work out for you.

[elainelylee]

How can we compose something like a tooltip but allows us to show more information like a popover? For example,

[kate-porter]

As Simon called out, a button trigger needs to be easily distinguishable from surrounding static text prior to any interaction (like hover), so it is clear to all users that the text is actionable. Black text that gets an underline on hover would not accomplish this, as it would look just like the surrounding text.

My recommendation for this would be to use a popover (you can put whatever you want in a popover, so it would support the addition of an avatar), and have the "qualified2387" text a link-style button that triggers it on click. You could also use an icon-only link-style button next to the "qualified2387" text that triggers the popover on click, instead of triggering it with the text.

[elainelylee]

Here's an example of having the icon button.

Can also try using the blue link-button, but be a little unexpected the first time users interact with it thinking it will bring them somewhere but just opens a small popover. For the case where we have "ID unavailable" as a placeholder, we may not be able to have a blue text-link there as it will no longer look like a placeholder. What are your thoughts?

In the cases where there are avatars, we would be able to make that the button. But, that's not always the case.

A different but related question that I can't find the answer to. Do we allow line breaks in the tool tip? If so, we may be able to use that and not include an avatar.

[SiTaggart]

I'm not sure I understand what question you're asking for the first one, but for the second:

Do we allow line breaks in the tool tip?

Tooltips should only be single line, short string with no formatting. The API of the components also only accepts that. The reason being, is that because tooltips are supplementary content, there is no way to communicate formatting to assistive technology. A screen reader for example only announces the content as a single string and removes all grammar and formatting, concatenating some words together, so the text is no longer understandable. As it is supplementary a screen reader also doesn't provide the usual text inspect controls you'd find in normal screen text. For example, a long complex paragraph can be announced word by word, letter by letter, go backwards or forwards, to make it easier to understand. None of those controls are provided for supplementary text so if the content is long and complex, it's very hard for a screen reader to understand it.

[elainelylee]

This is the latest version. User clicks on link button to get the popover. And, user clicks on the info icon to get to popover.

[kate-porter]

Just a followup from office hours - our recommendation on this would be to use the same style for everything in the table that performs the same action. So, instead of using the info icon to trigger the popover when name/ID/etc. are unavailable, make the "name unavailable" or "ID unavailable" text a link-style button that triggers the popover, and forgo the info icon.