Can Popover anchor on an element like a <Box> ?

[yunuscanemre]

Wondering if Popover component can pop over something other than a popover button ? As seen in the picture below, we're looking for a popover but over a chat bubble. Is this something that should be build using Non modal dialog primitive or can Popover support this use case. Thanks.

[dosubot[bot]]

🤖

Hey there, @yunuscanemre! I'm Dosu, a bot here to lend a hand with bug squashing, answering questions, and guiding you on your journey to becoming a contributor while we await a human maintainer. I can't view images or links, but don't worry, I'm here to help with your query on the Popover component. I'll dive into your issue and get back to you with a comprehensive answer shortly. Hang tight!

[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 mouseOver - Answer (updated: 02/02/2023, similarity score: 89%)
• Popover component: Thoughts and advice (updated: 02/02/2023, similarity score: 88%)
• Popovers with Input fields (updated: 07/11/2022, similarity score: 87%)

[dosubot[bot]]

🤖

Yes, you can use the Popover component in Paste to overlay a chat bubble. The Popover component in Paste is designed to display additional information or actions in a floating container. It can be used to create a chat bubble-like overlay similar to a Box element.

Here is an example of how you can use the Popover component to create a chat bubble-like overlay:

const PopoverExample = () => {
  return (
    <PopoverContainer baseId="popover-example">
      <PopoverButton variant="primary">Open Chat</PopoverButton>
      <Popover aria-label="Chat Bubble">
        <Heading as="h3" variant="heading30">Chat Message</Heading>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Text as="span">
          This is a chat message.
        </Text>
        <Separator orientation="horizontal" verticalSpacing="space50" />
        <Button onClick={() => {}} variant="primary">Send</Button>
      </Popover>
    </PopoverContainer>
  );
};

render(
  <PopoverExample />
)

In this example, when the "Open Chat" button is clicked, a Popover appears that contains a heading, a chat message, and a "Send" button. The Popover is labeled with "Chat Bubble" for accessibility purposes.

The Non-modal dialog primitive is a lower-level component that provides more flexibility but requires more configuration. If you need to create a more complex chat bubble overlay, you might consider using the Non-modal dialog primitive. However, for most use cases, the Popover component should be sufficient.

Regarding the properties and methods available for the Popover component, it includes the following properties:

1. aria-label: A string that provides an accessible name for the Popover component, which is required.

2. children: The content that will be rendered inside the Popover.

3. i18nDismissLabel: An optional string that provides an accessible label for the dismiss button, with a default value of 'Close popover'.

4. width: An optional responsive value that determines the width of the Popover, which can be one of "size10", "size20", "size30", "size40", or "size50".

5. initialFocusRef: An optional React ref object that points to an interactive element to receive focus when the Popover opens.

6. element: An optional string that overrides the default element name for applying unique styles with the Customization Provider, with a default value of 'POPOVER'.

The Popover component also uses the NonModalDialogPrimitive from @twilio-paste/non-modal-dialog-primitive and includes a Button with an onClick event handler that calls popover.hide to close the Popover. Additionally, it uses the PopoverArrow component for rendering the arrow and ScreenReaderOnly to provide screen reader-only text for the dismiss button.

Please note that the Popover component does not have any methods explicitly defined, but it does utilize the hide method from the popover context to close the Popover when the dismiss button is clicked.

You can find more details in the Popover component source code and tests.

Sources

• packages/paste-website/src/component-examples/PopoverExamples.ts
• packages/paste-core/components/popover/tests/index.spec.tsx
• packages/paste-core/components/popover/src/Popover.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[TheSisb]

Hi @yunuscanemre,

The main question isn't can you, but rather should you? In order to build accessible products, it is important that the Popover trigger is a focusable element like a button. This is because it should be clear that there exists a user interaction on an element for both screenreader and mouse users. If one product has a chat log with message bubbles that are clickable and another does not, or even multiple messages within the same UI, this can create confusion for users too.

If you want to make message bubbles clickable, they would each need to be buttons with a tabindex, so screenreaders can tab through them and select them with enter and space. They would also need hover/focus UI states so sighted users with a mouse can detect there is a click effect.

Ultimately, you should do research to figure out what is best for your users. An alternate approach is adding a button trigger under/near the message bubble somewhere that can open the popup instead. Would this work?

Lastly, take a look at the examples on our documentation, specifically the 3rd one here. You can see we give the PopoverButton a variant="reset" which lets the child effectively be the trigger. Again, be wary about the accessibility of this decision.

Hope this helps!

[yunuscanemre]

It does thank you. We've gone with a simple button beside the bubbles which like you said i think will be much better for accessibility.