Igloo branding


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


childrenReactNodeThe target button, text, svg etc.. of the Popover.
classNamestringAdd a specific class to the Popover container
disabledbooleanWhether or not the popover is disabled and should not open
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
triggerEventTriggerEventThe event that triggers the opening or closing of the popover
interactivebooleanWhether or not the mouse is allowed inside the popover (This is only useful when the triggerEvent is set to 'hover')