Skip to main content

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 tooconst 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)