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 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' .

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

Function called on open event

onClose

{func}

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 |

Example : on focus

const PopupOnFocus = () => (
  <Popup
    trigger={<input type="text" placeholder="start typing ... " />}
    on="focus"
    position="top left"
    closeOnDocumentClick
  >
    <span> On focus popup event </span>
  </Popup>
);

render(<PopupOnFocus />);
const PopupOnFocus = () => (
  <Popup
    trigger={<input type="text" placeholder="start typing ... " />}
    on="focus"
    position="top left"
    closeOnDocumentClick
  >
    <span> On focus popup event </span>
  </Popup>
);
render(<PopupOnFocus />);