Skip to main content

Popover

A popup that displays information related to an element triggered by a button.

Basic usage​

import { Popover, Button, Slot } from '@streamelements/frontend-ui';
import { CloseCircleRounded } from '@streamelements/frontend-icons';

export function MyTooltip() {
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <Button variant="ghost">Click me</Button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content>
          Tooltip content
          <Popover.Arrow />
          <Popover.Close asChild>
            <CloseCircleRounded />
          </Popover.Close>
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  )
}

Exposed components​

  • Root
  • Trigger
  • Arrow
  • Portal
  • Content
  • Close
  • Anchor

Props​

Props are available on https://radix-ui.com/primitives/docs/components/popover

Portal​

The Portal component portals the content outside of the parent element, ensuring the content is displayed on top of everything else.

Content​

Name

Type

Default value

Description

cssCSS{}
Pass on additional styling utilizing Stitches' tokens

The rest of the Props are available on Radix docs website

Arrow​

Name

Type

Default value

Description

cssCSS{}
Pass on additional styling utilizing Stitches' tokens

When changing the background color of Content, you should do it via overriding the locally scoped token $$fillColor. This way the Arrow will automatically get the same fill color and you don't need to specify a color in both components.

The rest of the Props are available on Radix docs website