Popover

Popover API panel

Extra content next to the thing that opens it — a small form, details, a colour picker. For a one-line hint use a Tooltip; for commands, a DropdownMenu.

Basic

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

Popover

Native popover=auto: light dismiss, Esc, top layer.

<script setup lang="ts">
import { BlessButton, BlessPopover, type Placement } from "blessing-ui";
const placements: Placement[] = [
  "top",
  "top-start",
  "top-end",
  "bottom",
  "bottom-start",
  "bottom-end",
  "left",
  "right",
];
</script>

<template>
  <div class="row">
    <BlessPopover v-for="p in placements" :key="p" :placement="p" title="Popover">
      <template #trigger
        ><BlessButton variant="outline" size="sm">{{ p }}</BlessButton></template
      >
      <template #default="{ close }">
        <p style="margin: 0 0 8px">Native popover=auto: light dismiss, Esc, top layer.</p>
        <BlessButton size="sm" @click="close">close</BlessButton>
      </template>
    </BlessPopover>
  </div>
</template>

Manual

Manual (modal)No light dismiss.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessPopover } from "blessing-ui";
const open = ref(false);
</script>

<template>
  <BlessPopover v-model:open="open" modal title="Manual (modal)">
    <template #trigger
      ><BlessButton>manual, open = {{ open }}</BlessButton></template
    >
    <template #default="{ close }"
      >No light dismiss. <BlessButton size="sm" @click="close">close</BlessButton></template
    >
  </BlessPopover>
</template>

Arrow

With arrow The arrow points at the trigger and stays inside the panel when it shifts.

With arrow The arrow points at the trigger and stays inside the panel when it shifts.

With arrow The arrow points at the trigger and stays inside the panel when it shifts.

With arrow The arrow points at the trigger and stays inside the panel when it shifts.

<script setup lang="ts">
import { BlessButton, BlessPopover } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessPopover
      v-for="p in ['top', 'bottom', 'left', 'right'] as const"
      :key="p"
      :placement="p"
      arrow
      title="With arrow"
    >
      <template #trigger
        ><BlessButton variant="outline" size="sm">{{ p }}</BlessButton></template
      >
      The arrow points at the trigger and stays inside the panel when it shifts.
    </BlessPopover>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

• A click on the trigger opens it; the trigger is told what it opens and whether it's open. Esc or a click outside closes it, and focus goes back to the trigger if it was inside.
• modal turns off the click-outside close (Esc and your own control still close it). trigger="hover" opens on hover and focus, for previews only — see HoverCard.
• title names it; arrow points its accent edge at the trigger.

Usage

import { BlessPopover } from "blessing-ui";

API

Props

Name	Type	Default	Description
placement	Placement	"bottom"
offset	number	—
trigger	"click" | "hover" | "manual"	"click"	trigger interaction
openDelay	number	300
closeDelay	number	200
modal	boolean	—	no light dismiss: only Esc or your own control closes it
title	string	—
arrow	boolean	—	the accent edge slides along to point at the trigger
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]

Slots

Name	Scope	Description
trigger	{ open: boolean; }
default	{ close: () => boolean; }