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

## Usage

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