ui/docs/content/6.overlays/3.popover.md

description, links

description	links
Display a non-modal dialog that floats around a trigger element.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue label icon to Popover i-simple-icons-headlessui https://headlessui.com/vue/popover

Usage

:component-example{component="popover-example"}

Mode

Use the mode prop to switch between click and hover modes.

:component-example{component="popover-example-mode"}

Manual

Use the open prop to manually control showing the panel.

:component-example{component="popover-example-open"}

Overlay

:component-example{component="popover-example-overlay"}

::callout{icon="i-heroicons-light-bulb"} Clicking on the overlay emits update:open. If you are manually controlling the open prop, you will need to use a v-model argument (v-model:open). ::

Popper

Use the popper prop to customize the popper instance.

Arrow

:component-example{component="popover-example-arrow"}

Placement

:component-example{component="popover-example-placement"}

Offset

:component-example{component="popover-example-offset"}

Slots

panel

Use the #panel slot to fill the content of the panel. You will have access to the open property and the close method in the slot scope.

:component-example{component="popover-example-slot"}

Props

:component-props

Config

:component-preset