placementbottomPreferred placement of the Popper
disableClickAwayfalseDisables automatically closing the Popper when the user clicks away from it
offsetSkid0Offset in pixels along the trigger element
offsetDistance12Offset in pixels away from the trigger element
hoverfalseTrigger the Popper on hover
arrowfalseDisplay an arrow on the Popper
arrowPadding0Stop arrow from reaching the edge of the Popper (in pixels)
disabledfalseDisables the Popper. If it was already open, it will be closed.
openDelay0Open the Popper after a delay (ms)
closeDelay0Close the Popper after a delay (ms)
interactivetrueIf the Popper should be interactive, it will close when clicked/hovered if false
contentnullIf your content is just a simple string, you can pass it as a prop
shownullControl the Popper manually, other events (click, hover) are ignored if this is set to true/false
zIndex9999The z-index of the Popper
lockedfalseLock the Popper into place, it will not flip dynamically when it runs out of space if this is set to true


open:popperWhen the Popper is opened
close:popperWhen the Popper is hidden


contentFor the Popper content

Slot props

The content slot gives you access to useful variables and functions.

closefunctionA function to close the Popper
isOpenbooleanThe open state of the Popper

CSS variables

Popper only comes with some barebones styling by default, but it also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

CSS variableExample value
--popper-theme-box-shadow0 6px 30px -6px rgba(0, 0, 0, 0.25)