sidebar | depth |
---|---|
auto |
3 |
Hides all shown poppers.
import { hideAllPoppers } from 'floating-vue'
hideAllPoppers()
createTooltip(el, valueOrOptions, directiveModifiers)
creates a tooltip on a given element.
import { createTooltip, destroyTooltip } from 'floating-vue'
export function clipboardSuccess (el) {
const tooltip = createTooltip(el, {
triggers: [],
content: 'Text copied!',
})
tooltip.show()
setTimeout(() => {
tooltip.hide()
// Transition
setTimeout(() => {
destroyTooltip(el)
}, 400)
}, 600)
}
destroyTooltip(el)
destroys a tooltip on a given element.
See example above.
<button v-tooltip="{
/* options */
}">
The directive also support all the Component props.
HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.
<template>
<button v-tooltip="{ content: 'Hello world' }">
Hover me
</button>
</template>
If you don't need any other option you can directly put the content in the directive:
<template>
<button v-tooltip="'Hello world'">
Hover me
</button>
</template>
Example with a function that returns a Promise:
<template>
<button v-tooltip="{ content: fetchTooltip }">
Hover me
</button>
</template>
::: warning Put the function, not a function call! That way the function is only called when the tooltip is shown.
Don't:
{ content: fetchTooltip() }
Do:
{ content: fetchTooltip }
:::
Boolean: allow HTML tooltip content.
<template>
<button v-tooltip="{ content: '<i>Italic</i>', html: true }">
Hover me
</button>
</template>
Same as content
, used when the actual tooltip content is loading.
<template>
<button
v-tooltip="{
content: fetchTooltip,
loadingContent: 'Loading tooltip...',
}"
>
Hover me
</button>
</template>
The popper theme applied to the popper (default: 'dropdown'
).
Quick way to add one-time classes to the popper container, for example to limit its width in a specific situation.
::: tip It's recommended to use themes to style the poppers. :::
Popper placement (default: 'bottom'
).
The available placements are:
'auto'
'auto-start'
'auto-end'
'top'
'top-start'
'top-end'
'right'
'right-start'
'right-end'
'bottom'
'bottom-start'
'bottom-end'
'left'
'left-start'
'left-end'
Either absolute
or fixed
(default: absolute
). If your reference element is in a fixed container, use the fixed
strategy.
Array of events triggering the popper.
Available events:
'hover'
'click'
'focus'
'touch'
Example:
<VDropdown :triggers="['hover', 'focus']"/>
If you want to manually trigger the popper, use an empty array: :triggers="[]"
:
<!-- Manual -->
<VDropdown :triggers="[]"/>
Override the trigger events for showing.
Can also be a function that gets the triggers
list, and should return the new list:
<VDropdown
:showTriggers="triggers => [...triggers, 'click']"
/>
Override the trigger events for hiding.
Can also be a function that gets the triggers
list, and should return the new list:
<VDropdown
:hideTriggers="triggers => [...triggers, 'click']"
/>
Array of events triggering the popper applied on the popper container itself.
Available events:
'hover'
'click'
'focus'
'touch'
For example, it's useful when triggering on hover
so that the popper stay open when mouse hovering it:
<VDropdown
:popperTriggers="['hover']"
/>
Override the trigger events for showing on the popper container itself.
Can also be a function that gets the triggers
list, and should return the new list:
<VDropdown
:popperShowTriggers="triggers => [...triggers, 'click']"
/>
Override the trigger events for hiding on the popper container itself.
Can also be a function that gets the triggers
list, and should return the new list:
<VDropdown
:popperHideTriggers="triggers => [...triggers, 'click']"
/>
Show/Hide delay, or object in ms.
Examples:
<VDropdown :delay="200" />
<VDropdown :delay="{ show: 500, hide: 100 }" />
Boolean that shows or hide the popper. You should probably use no trigger events (manual mode).
<VDropdown :shown="isMenuShown" :triggers="[]" />
Distance along the main axis relative to the reference (pixels).
<VDropdown :distance="12" />
Skidding along the cross axis relative to the reference (pixels).
<VDropdown :skidding="12" />
Padding of the arrow relative to the popper bounds to prevent it from overflowing if you have rounded borders on the popper (pixels).
<VDropdown :arrow-padding="12" />
Selector: Container where the popper will be appended (e.g. 'body'
).
DOM element for the popper position and size boundaries.
Hide the popper if clicked outside.
<VDropdown auto-hide />
Boolean that disables the popper. If it was already open, it will be closed.
Boolean that disables the automatic positioning of the popper. You can then style it manually. Useful for mobile version of the popper.
Boolean: Automatically update the popper position if its size changes.
<VDropdown handle-resize />
If set, will close all the open popovers that have a different or unset showGroup
value.
<VDropdown show-group="my-group-name" />
Boolean: skip delay & CSS transitions when another popper is open, so that the popper appear to instanly move to the new position.
<VDropdown instant-move />
Boolean: mount the popper content without waiting for the popper to be displayed.
<VDropdown eager-mount />
Number of ms after hide when the popper instance is destroyed.
Computes the transform origin of the .v-popper__wrapper
to allow zooming effects relative to the reference element.
Example:
<template>
<VDropdown compute-transform-origin />
</template>
<style>
.v-popper__wrapper {
transition: transform .15s;
}
.v-popper__popper.v-popper__popper--hidden .v-popper__wrapper {
transform: scale(.5);
}
</style>
Boolean | 'min' | 'max'
: set the size of the popper inner
container depending on the size of the reference.
- If the final placement is
top-*
orbottom-*
, the reference width will be taken into account. - If the final placement is
left-*
orright-*
, the reference height wll be taken into account.
Possible values:
true
: the popper container will be set to the same size as the reference element.'min'
: the popper container will be set to the minimum size of the reference element.'max'
: the popper container will be set to the maximum size of the reference element.
<VDropdown auto-size />
<VDropdown auto-size="min" />
<VDropdown auto-size="max" />
Boolean: let floating vue resize the popper inner container to the available size (using max-width
and max-height
). It's very useful for a dropdown that should automatically shrink its size when it reaches the boundary.
<VDropdown auto-boundary-max-size />
Boolean: prevent the popper from overflowing the boundary
.
<VDropdown :prevent-overflow="false" />
Virtual padding in the boundary
used to prevent the popper overflow (pixels).
<VDropdown :overflow-padding="10" />
Boolean: prevent the popper from overflowing the boundary
by using an opposite placement if needed.
<VDropdown :flip="false" />
Boolean: prevent the popper from overflowing the boundary
by adjusting its position.
<VDropdown :shift="false" />
Boolean: prevent the popper from overflowing the boundary
by adjusting its position.
<VDropdown shift-cross-axis />
Boolean: disable the auto focus on the popper DOM node when shown.
<VDropdown no-auto-focus />
Id used for the aria-describedby
attribute. By default a random id.
Content put in the trigger part of the popper, typically a button.
- Props:
shown
: boolean indicating if the popper is shownshow
: method to show the popperhide
: method to hide the popper
<VDropdown>
<button>Click me</button>
</VDropdown>
Content put inside the popper of the popper.
- Props:
shown
: boolean indicating if the popper is shownhide
: method to hide the popper
<VDropdown>
<button>Click me</button>
<template #popper="{ hide }">
Menu content here!
<button @click="hide()">Close</button>
</template>
</VDropdown>
Boolean: This allow you to use the .sync
modifier on the show
prop (Vue 2) or the v-model:shown
directive (Vue 3).
<!-- Vue 3 -->
<VDropdown v-model:shown="isMenuShown" />
<!-- Vue 2 -->
<VDropdown :shown.sync="isMenuShown" />
When the popper is going to be shown.
Emitted after the show delay.
When the popper is going to be hidden.
Emitted after the hide delay.
Popper instance is destroyed.
Emitted when the popper is closed if clicked outside.
Emitted when the popper is closed with the Close directive.
Emitted when the popper is closed because a popper of another showGroup
was shown.
Emitted when the content size changes. You must set the handleResize
prop to true
.
Use the v-close-popper
directive on an element inside the dropdown to close it when the element is clicked (or touched on mobile):
<VDropdown>
<button>Click me</button>
<template #popper>
<a v-close-popper>Close</a>
</template>
</VDropdown>
Value: Boolean
(default: true
). Pass false
to disable the directive.
Modifiers:
all
: Close all the poppers in the page.