Component API

This is the list of props that you should probably know about👇

trigger

{node,func} | require

Element to be rendered in-place where the popup is defined

// need to forward ref if you are trying to use a function trigger with React Component
// Works
<Popup
trigger={open => (
<button className="button">Trigger - {open ? 'Opened' : 'Closed'}</button>
)}
position="right center"
closeOnDocumentClick
>
<span> Popup content </span>
</Popup>;
// works too
const CustomButton = React.forwardRef(({ open, ...props }, ref) => (
<button className="button" ref={ref} {...props}>
Trigger - {props.open ? 'Opened' : 'Closed'}
</button>
));
<Popup
trigger={open => <CustomButton open={open} />}
position="right center"
closeOnDocumentClick
>
<span> Popup content </span>
</Popup>;

open

{bool}

Take full control over the popup state.

defaultOpen

bool | false

Default open value : initial state

on

enum,Array | 'hover'

Events triggering the popup. Enums or Array of : 'hover' 'click' 'focus' 'right-click' .

children

node or func

Popup content

position

{enum, Array} | 'bottom center'

Position for the popover. Best position(calculated by checking against overlap with boundary element) is applied in the order specified.
Enums:'top left' 'top right' 'bottom right' 'bottom left' 'right center' 'left center' 'top center' 'bottom center' 'center center'

offsetX

number | 0

OffsetX in pixels to be applied to the Popup.

offsetY

number | 0

OffsetY in pixels to be applied to the Popup.

arrow

bool | true

Arrow element. Note that this should be set to false if the position is set to 'center center'

modal

bool| false

A modal component when modal ={true}

disabled

bool | false

Disable the popup from showing up and close it if it's open

lockScroll

bool | false

Disable body scroll when modal is open ( work only with modal)

closeOnDocumentClick

bool | true

Close popup when the overlay clicked

closeOnEscape

bool | true

Close popup when Escape clicked

repositionOnResize

bool | true

Recalculate position when window is resized

mouseEnterDelay

number | 100 Milliseconds to wait before opening on mouse over

mouseLeaveDelay

number | 100

Milliseconds to wait before closing on mouse leave

onOpen

func

A function called on open event

onClose

{func}

A function called on close event

contentStyle

object

Custom popup content style |

overlayStyle

object

Custom overlay style
Note: top and left property will not be overridden. |

arrowStyle

object

Custom arrow style
Note: transform property will not be overridden. |

className

string

Custom Popup ClassName
Note: this class name will be merged with the component element: ex className='foo' means foo-arrow to style arrow, foo-overlay to style overlay and foo-content to style popup content |

keepTooltipInside

bool, string | true

Html selector, class name or id element that the tooltip must be inside (defaults to window if keepTooltipInside = true) default false |

nested

bool | false

Starting from v2 you should add nested props if you are going to use nested popups ( to make sure onClickOutside behavior will work as expected)

Edit this page