Popover - Nuxt UI

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

any

undefined

mode

"click" | "hover"

"click"

popper

{}

{}

openDelay

number

0

closeDelay

number

0

disabled

boolean

false

open

boolean

undefined

Preset

UPopover.vue

{  "wrapper": "relative",  "container": "z-20",  "width": "",  "background": "bg-white dark:bg-gray-900",  "shadow": "shadow-lg",  "rounded": "rounded-md",  "ring": "ring-1 ring-gray-200 dark:ring-gray-800",  "base": "overflow-hidden focus:outline-none",  "transition": {    "enterActiveClass": "transition ease-out duration-200",    "enterFromClass": "opacity-0 translate-y-1",    "enterToClass": "opacity-100 translate-y-0",    "leaveActiveClass": "transition ease-in duration-150",    "leaveFromClass": "opacity-100 translate-y-0",    "leaveToClass": "opacity-0 translate-y-1"  },  "popper": {    "strategy": "fixed"  }}

Slideover

Display a dialog that slides in from the edge of the screen.

Tooltip

Display content that appears on hover next to an element.