Skip to content
Telescope
Components

Popover

A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.
(Psst...click the 'i' icon to see a popover in action)

Features

  • Traps focus within the popover.
  • Flexible and unopinionated.
  • Animates and positions out of the box.

When to use

See our design pattern around overlays to learn why and when you should use this component.

Examples

With button trigger

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>

With arrow

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Box p={12}>This is a nice popover</Box>
        <Popover.Arrow />
    </Popover.Content>
</Popover>

Position on right side

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content side="right">
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>

Align content

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content align="end">
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
    </Popover.Content>
</Popover>

Match trigger width

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content matchWidth>
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
        <Popover.Close>Close</Popover.Close>
    </Popover.Content>
</Popover>

Controls container

Show code
<Popover>
    <Popover.Trigger>
        <Button type="button" variant="primary">
            Click me
        </Button>
    </Popover.Trigger>
    <Popover.Content>
        <Popover.Arrow />
        <Box p={12}>This is a nice popover</Box>
        <Popover.ControlsContainer>
            <Popover.ActionButton>Apply</Popover.ActionButton>
            <Popover.Close>Close</Popover.Close>
        </Popover.ControlsContainer>
    </Popover.Content>
</Popover>

Accessibility

Adheres to the Dialog WAI-ARIA design pattern. See Radix documentation for details.

Related components

  • Help popover: An icon button with a question mark that reveals help information on click or tap.
  • Modal: A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
  • Tooltip: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page