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


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


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

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

  content="Popover copy"
      <a href="#">Learn more</a>
  Trigger content


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