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