Popover - Nuxt UI

Usage

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

    <template #panel>
      <div class="p-4">
        <Placeholder class="h-20 w-48" />
      </div>
    </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>
      <div class="p-4">
        <Placeholder class="h-20 w-48" />
      </div>
    </template>
  </UPopover>
</template>

Manual

Use the open prop to manually control showing the panel.

<script setup>
const open = ref(false)
</script>

<template>
  <div class="flex gap-4 items-center">
    <UToggle v-model="open" />
    <UPopover :open="open">
      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

      <template #panel>
        <div class="p-4">
          <Placeholder class="h-20 w-48" />
        </div>
      </template>
    </UPopover>
  </div>
</template>

Overlay New

<template>
  <div class="flex gap-4 items-center">
    <UPopover overlay>
      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

      <template #panel>
        <div class="p-4">
          <Placeholder class="h-20 w-48" />
        </div>
      </template>
    </UPopover>
  </div>
</template>

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

<template>
  <UPopover :popper="{ arrow: true }">
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <div class="p-4">
        <Placeholder class="h-20 w-48" />
      </div>
    </template>
  </UPopover>
</template>

Placement

<template>
  <UPopover :popper="{ placement: 'top-end' }">
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <div class="p-4">
        <Placeholder class="h-20 w-48" />
      </div>
    </template>
  </UPopover>
</template>

Offset

<template>
  <UPopover :popper="{ offsetDistance: 0 }">
    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />

    <template #panel>
      <div class="p-4">
        <Placeholder class="h-20 w-48" />
      </div>
    </template>
  </UPopover>
</template>

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.

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

    <template #panel="{ close }">
      <div class="p-8">
        <UButton label="Close" @click="close" />
      </div>
    </template>
  </UPopover>
</template>

Props

{}

{}

mode

"click" | "hover"

"click"

popper

PopperOptions

{}

openDelay

number

0

closeDelay

number

0

disabled

boolean

false

open

boolean

undefined

overlay

boolean

false

Config

{
  "wrapper": "relative",
  "container": "z-50 group",
  "trigger": "inline-flex w-full",
  "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 relative",
  "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"
  },
  "overlay": {
    "base": "fixed inset-0 transition-opacity z-50",
    "background": "bg-gray-200/75 dark:bg-gray-800/75",
    "transition": {
      "enterActiveClass": "ease-out duration-200",
      "enterFromClass": "opacity-0",
      "enterToClass": "opacity-100",
      "leaveActiveClass": "ease-in duration-150",
      "leaveFromClass": "opacity-100",
      "leaveToClass": "opacity-0"
    }
  },
  "popper": {
    "strategy": "fixed"
  },
  "arrow": {
    "base": "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2",
    "ring": "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
    "rounded": "before:rounded-sm",
    "background": "before:bg-gray-200 dark:before:bg-gray-800",
    "shadow": "before:shadow",
    "placement": "group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1"
  }
}

Slideover

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

Tooltip

Display content that appears on hover next to an element.