Popover

Primary UI element for content whose visibility can be toggled with a click on a trigger element

Renders a UI component that opens a popup dialog when user clicks on a trigger element.


Popover Trigger & Content

Popover components consist of 2 main elements:

  • Popover Trigger – an element that shows/hides the Popover.
  • Popover Content – card with content that is toggled by the Trigger.

For Trigger you can use just a plain string (for default variant), or following components from Wave:

  • <Text>
  • <Button>
  • <Button> with Icon
  • <Icon>
  • <Link>

The Popover Content acts as a container for any content: text, form, or anything else...


Difference from a Tooltip component

  • Popover is toggled by clicking on (not hovering over) the Trigger. The second click (or click outside the Popover) hides the Popover.
  • Popover scrolls with the page
  • Popover content and trigger are not limited to text.

Style Props

The Popover supports:

  • placement prop for specifying the Popover content attachment in relation to the Popover trigger
  • offset prop for the margin between Trigger and Popover card.



API

NameTypeDefault
children

React.ReactNode

Popover Trigger (Only use Text, Link, Button or Icon component from @wave as a trigger)
content

React.ReactNode

Popover content (can be any valid React Element or component containing React Elements)
placement

autoauto-startauto-endtoptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end

Optional: Specify the Popover content placement (it changes automatically if the Popover content cannot fit inside the viewport with the selected placement)
bottom-start
offset

number

Optional: Specify the Popover content offset (margin between Popover trigger and content)
5
isOpen

boolean

Optional: Keep popover content open by default
onOpen

() => void

Optional: Define a callback for when Popover content is opened
onClose

() => void

Optional: Define a callback for when Popover content is closed

Usage

Default (pass only string as trigger)

Trigger
<Popover content={<Text>Content for the Popover. Can contain Icons, Forms or other elements.</Text>}>
Trigger
</Popover>

With Button as trigger

<Popover content={<Link>Open in Payment CRM</Link>}>
<Button size='small' variant="secondary"><SettingsIcon size={20} /> Manage Booking</Button>
</Popover>

Bulk Actions

<Popover content={<Link>Revert Action</Link>}>
<Button size='small' variant="secondary">...</Button>
</Popover>

With No Padding

<Popover content={'There is no padding...'} padding={0}>
<Button size='small' variant="secondary"><SettingsIcon size={20} /> Manage Booking</Button>
</Popover>

Playground

Table of contents
APIUsagePlayground