Popover

Floating Popovers for displaying additional information.

Popover is built on top RadixUI Popover component. All RadixUI props are passed, and can be used in the same way.

children

ReactNode

The content of the popover

*Can't edit react node values here

Anatomy

<Popover>
  <Popover.Trigger> 
    {/* ... */}
  </Popover.Trigger>
  <Popover.Content>
    {/* ... */}
  <Popover.Content>
</Popover>

Examples

Without Arrow Indicator

To remove the arrow from the popover, add arrowClassName='fill-transparent' prop to Tooltip.Content.

You can also enable this globally by setting popover.content_arrow: 'fill-transparent' in your UniversalUIConfigProvider.