Popover

The <Popover /> component is similar to <Tooltip />, but more dynamic. It usually contains information, images and CTAs as opposed to just a few words. To use, import from @marvelapp/ui:

import { Popover } from '@marvelapp/ui';

Show on hover/click

The <Popover /> component will have the showOn prop set to hover by default. It’ll get the first child you pass to it and listen to hover events. When one occurs, it’ll show the popover, with the second child in.

You can also pass down custom to the showOn prop, in which case the {children} won’t be split, and you’ll have to to set the isActive prop yourself.

<Popover showOn="click">
  <Button>Popover on click</Button>
  <Text>This popover contains very useful information indeed.</Text>
</Popover>

Position

The <Popover /> component will have the position prop set to top by default. It can also be bottom.

<Popover position="bottom">
  <Button>Popover on click</Button>
  <Text>This popover contains very useful information indeed.</Text>
</Popover>

Align

The <Popover /> component will have the align prop set to center by default. It can also be left or right.

<Popover position="left">
  <Button>Popover on click</Button>
  <Text>This popover contains very useful information indeed.</Text>
</Popover>

Props