Rich Popover

UPopover with motion added to the panel. The content surface springs in from 0.95 with a slight downward offset, and — if you ask for it — a second, arrow shaped diamond scales in behind it a beat later so the panel appears to grow out of the trigger.

The trigger, the anchoring, the dismissable layer and Escape handling are all upstream. This component owns the animation and, importantly, the #content slot: when you provide one, upstream's own content markup (including its positioned arrow) is replaced, which is why the arrow you see is the component's own and not UPopover's.

mode="hover" swaps the underlying primitive for a hover card, which opens on pointer intent instead of a click. Delays are forwarded, so openDelay and closeDelay only mean anything in that mode.

Usage

Put the trigger in the default slot and the panel in #content — the content slot is what makes this component animate, and without it you get UPopover's empty surface. #anchor is passed through if you need to position against something other than the trigger.

<template>
  <div class="flex w-full max-w-md flex-col items-start gap-4">
    <MRichPopover arrow>
      <UButton
        label="Release notes"
        icon="i-lucide-megaphone"
        trailing-icon="i-lucide-chevron-down"
      />
      <template #content>
        <div class="w-72 space-y-4 p-4">
          <div>
            <p class="text-sm font-semibold">
              v4.2.0
            </p>
            <p class="text-xs text-muted">
              Shipped two days ago
            </p>
          </div>

          <ul class="space-y-2 text-sm">
            <li
              v-for="entry in entries"
              :key="entry"
              class="flex gap-2"
            >
              <UIcon
                name="i-lucide-check"
                class="mt-0.5 size-4 shrink-0 text-success"
              />
              <span>{{ entry }}</span>
            </li>
          </ul>

          <UButton
            label="Read the changelog"
            icon="i-lucide-arrow-up-right"
            size="sm"
            block
          />
        </div>
      </template>
    </MRichPopover>

    <p class="text-xs text-muted">
      Escape, an outside click, or the trigger itself dismisses it.
    </p>
  </div>
</template>

<script setup lang="ts">
const entries = [
  'Dock keeps magnification between sessions',
  'DockItem exposes an active prop',
  'The bezier spring now matches the reference curve',
]
</script>

Customize

Props

Events

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.richPopover in app.config.ts.

Accessibility

Nothing semantic is added here. The animated wrapper is a plain motion.div with will-change-transform, so role="dialog", the dismissable-layer behaviour, Escape, and focus management are all UPopover's (or Reka's) — and they keep working, because the animation is a sibling of the real content rather than a replacement for it. Content you put in #content is reachable by keyboard and can hold real controls, which is what makes this a popover and the tooltip a tooltip.

There is no reduced-motion branch in this component. Both springs — the panel (stiffness: 400, damping: 25, bounce: 0.1) and the arrow (stiffness: 500, damping: 30, delayed 0.05s) — are hard-coded and run under prefers-reduced-motion exactly as they do otherwise.

Performance

• The panel animates opacity, scale and y only; the wrapper is overflow-hidden and the animated layer carries will-change-transform.
• Open state is held in one internal ref, so the panel's v-if and the arrow's v-if are driven by the same boolean and cannot disagree.
• The arrow is a 50ms-delayed sibling animation rather than a second timeline — two independent springs, no orchestration cost.
• Only the #content and #anchor templates are bound conditionally, so a popover without them mounts strictly less than one with them.