Popover

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Installation

To install @igloo-ui/popover in your project, you will need to run the following command using npm:

npm install @igloo-ui/popover

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/popover

Usage

Then to use the component in your code just import it!

import Popover from '@igloo-ui/popover';
import Hyperlink from '@igloo-ui/hyperlink';

<Popover
  title="Date"
  content="Popover copy"
  action={
    <Hyperlink>
      <a href="#">Learn more</a>
    </Hyperlink>
  }
>
  Trigger content
</Popover>;

API

PropTypeDescription
childrenReactNodeThe target button, text, svg etc.. of the Popover.
popoverClassNamestringAdd a specific class to the Popover
contentReactNodeThe content to display inside the Popover
positionPositionThe position the Popover is on.
maxWidthnumberThe max with of the Popover
activebooleanWhen True, manually show the Popover.
titlestringThe content for the title of the Popover
actionReactNodeThe content for the call to action of the Popover
isClosablebooleanRender the close button
dataTeststringAdd a data-test tag for automated tests