API
Props
| Name | Default | Description |
|---|
placement | bottom | Preferred placement of the Popper |
disableClickAway | false | Disables automatically closing the Popper when the user clicks away from it |
offsetSkid | 0 | Offset in pixels along the trigger element |
offsetDistance | 12 | Offset in pixels away from the trigger element |
hover | false | Trigger the Popper on hover |
arrow | false | Display an arrow on the Popper |
arrowPadding | 0 | Stop arrow from reaching the edge of the Popper (in pixels) |
disabled | false | Disables the Popper. If it was already open, it will be closed. |
openDelay | 0 | Open the Popper after a delay (ms) |
closeDelay | 0 | Close the Popper after a delay (ms) |
interactive | true | If the Popper should be interactive, it will close when clicked/hovered if false |
content | null | If your content is just a simple string, you can pass it as a prop |
show | null | Control the Popper manually, other events (click, hover) are ignored if this is set to true/false |
zIndex | 9999 | The z-index of the Popper |
locked | false | Lock the Popper into place, it will not flip dynamically when it runs out of space if this is set to true |
Events
| Name | Description |
|---|
open:popper | When the Popper is opened |
close:popper | When the Popper is hidden |
Slots
| Name | Description |
|---|
content | For the Popper content |
Slot props
The content slot gives you access to useful variables and functions.
| Name | Type | Description |
|---|
close | function | A function to close the Popper |
isOpen | boolean | The 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 variable | Example value |
|---|
--popper-theme-background-color | #ffffff |
--popper-theme-background-color-hover | #ffffff |
--popper-theme-text-color | inherit |
--popper-theme-border-width | 1px |
--popper-theme-border-style | solid |
--popper-theme-border-color | #eeeeee |
--popper-theme-border-radius | 6px |
--popper-theme-padding | 16px |
--popper-theme-box-shadow | 0 6px 30px -6px rgba(0, 0, 0, 0.25) |