You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<!-- 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.