<!-- If your content is only a simple string, you can use the content prop --><template><v-poppercontent="This is the Popper content"><buttonslot="reference">
Reference Element
</button></v-popper></template><!-- If your content is more complex, you can use the content slot --><template><v-popper><div>This is the Popper content</div><template#reference><button>Trigger element</button></template></v-popper></template><script>import{defineComponent}from"vue";import{Popper}from"vue-popper-lite";import"vue-popper-lite/style.css";exportdefaultdefineComponent({components: {'VPopper': Popper,},});</script>
Props
Name
Type
Default
Description
trigger
String
hover
Optional value:
hover - hover to open popper content
clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it
clickToToggle - click on the popper toggles it's visibility
placement
String
bottom
Preferred placement of the Popper
delay-on-mouse-over
Number
10
Delay in ms before showing popper during a mouse over
delay-on-mouse-out
Number
10
Delay in ms before hiding popper during a mouse out
disabled
Boolean
false
Disables the Popper. If it was already open, it will be closed.
content
String
null
If your content is just a simple string, you can pass it as a prop
transition
String
empty
Custom transition class
enter-active-class
String
null
Custom transition class enter
leave-active-class
String
null
Custom transition class leave
force-show
Boolean
false
Force show popper
append-to-body
Boolean
false
Append content to body
visible-arrow
Boolean
true
Visible an arrow on the Popper
arrow-padding
Number
0
Stop arrow from reaching the edge of the Popper (in pixels)
enable-flip
Boolean
true
Popper into place, it will not flip dynamically when it runs out of space if this is set to false
offset-kidding
Number
0
Offset in pixels along the trigger element
offset-distance
Number
8
Offset in pixels away from the trigger element
stop-propagation
Boolean
false
Stop propagation event click
prevent-default
Boolean
false
Prevent default event click
strategy
String
absolute
Describes the positioning strategy to use. If your reference element is in a fixed container, use the fixed strategy
content-class
String
empty
Class name for content element
Events
Name
Description
created
Created popper component
show
Show popover
hide
Hide popover
document-click
Slots
Name
Description
default
For the Popper content
reference
For Trigger the Popper
CSS variables
Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.