overlays

Display a non-modal dialog that floats around a trigger element.

Usage

<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.

<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

ui
any

undefined

mode
"click" | "hover"

"click"

popper
{}

{}

openDelay
number

0

closeDelay
number

0

disabled
boolean

false

Preset

appConfig.ui.popover
undefined