Popover

Quick nav

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

Version 0.8.0

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="#">Tell me more</a>
    </Hyperlink>
  }
>
  Trigger content
</Popover>;

API

Prop	Type	Default	Description
`children`	ReactNode	-	The target button, text, svg etc.. of the Popover.
`className`	string	-	Add a specific class to the Popover container
`disabled`	boolean	-	Whether or not the popover is disabled and should not open
`popoverClassName`	string	-	Add a specific class to the Popover
`content`	ReactNode	-	The content to display inside the Popover
`position`	Position		The position the Popover is on.
`maxWidth`	number		The max with of the Popover
`active`	boolean		When True, manually show the Popover.
`title`	string	-	The content for the title of the Popover
`action`	ReactNode	-	The content for the call to action of the Popover
`isClosable`	boolean		Render the close button
`dataTest`	string	-	Add a data-test tag for automated tests
`triggerEvent`	TriggerEvent		The event that triggers the opening or closing of the popover
`interactive`	boolean		Whether or not the mouse is allowed inside the popover (This is only useful when the triggerEvent is set to 'hover')