Listbox and popover combination

[ankigupta92]

Hello, I am looking for some visual design guidance on combining listbox and popover components. Based on this previous GitHub discussion and OH, combining list items with popover is acceptable if the popover is only being used for a preview. Do we have an example of this in our product or can you confirm whether I am using this combination correctly?

Also attached an inspiration I am using from Mixpanel

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Popover component: Thoughts and advice (updated: 02/02/2023, similarity score: 85%)
• Combobox overflow question (updated: 10/23/2023, similarity score: 85%)
• Expanding item within visual picker - Answer (updated: 10/22/2024, similarity score: 85%)

[dosubot[bot]]

To combine Listbox and Popover components effectively in the Paste design system, you should ensure that the usePortal=false is set on the Multiselect Combobox when it is placed inside a Popover. This setting helps prevent interaction bugs caused by nested portals, as both the Listbox and the Popover are rendered using Reakit Portals ^[1].

For visual design guidance, the Paste design system documentation provides examples of using Popovers for previewing content. These examples demonstrate how to use a Popover to display supplemental information and interactive controls. You can refer to the "Basic Popover" and "Popover with interactive content" examples in the documentation for guidance ^[2].

If you are using the Popover for preview purposes, ensure that the content is not essential to task completion and that the Popover is triggered by a button. The Popover should have at least one focusable element, and the focus should be placed on the first focusable element when triggered ^[2].

If you need further examples or patterns, you might want to explore the Paste Theme Designer, which includes a specific example in the PopoverPreview.tsx file, showcasing a practical implementation of a Popover for content preview ^[3].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[serifluous]

Hey @ankigupta92 ! I mocked up what was described in the office hours here: https://www.figma.com/design/KlWRgdZx0mfbPEnOB7ZuYp/Paste-Feedback?node-id=837-8480&t=vPGrcEkfnIkIMKk6-4

I also included some options using Listbox Primitive for triggering a Tooltip. Since you don't have any interactive elements in the additional information that gets triggered, you could consider using a Tooltip here. Popover can't be used because click targets can't be part of a Combobox action.

[ankigupta92]

Thank you so much @serifluous!
Are there any accessibility concerns with the tooltip?

[serifluous]

No major concerns as long as you're using Tooltip + Listbox as intended! A listbox option should be able to take focus, which will trigger the Tooltip for assistive technologies. Mainly, as long as you're only putting text in the Tooltip (and no interactive/clickable content), you'll be good 👍👍.

[serifluous]

From a usability perspective, it won't be completely obvious to sighted users that a Tooltip will pop up on hover/focus. But if you feel like that's an ok tradeoff in order to keep the information hierarchy focused, then that's fine.