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 #default :popover-example #code

<template>
  <UPopover>
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <!-- Content -->
    </template>
  </UPopover>
</template>

::

Mode

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

::component-example #default :popover-example-mode #code

<template>
  <UPopover mode="hover">
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <!-- Content -->
    </template>
  </UPopover>
</template>

::

Slots

panel

Use the #panel slot to fill the content of the panel.

Props

:component-props

Preset

:component-preset