HoverCard

Rich hover popover

A preview shown while pointing at (or focusing) a link — a profile, a page summary. It is extra: touch screens can't hover, so nothing in it may be the only way to reach something.

Basic

Follow @saenai_heroine

SH

冴えない彼女の育てかた

TVアニメ公式 · joined 2014

for updates.

<script setup lang="ts">
import { BlessAvatar, BlessHoverCard, BlessText } from "blessing-ui";
</script>

<template>
  <div>
    Follow
    <BlessHoverCard>
      <template #trigger
        ><a href="#" style="color: var(--bless-color-accent-text); font-weight: 700"
          >@saenai_heroine</a
        ></template
      >
      <div style="display: flex; gap: 12px; align-items: center">
        <BlessAvatar name="Saenai Heroine" color="text" size="lg" />
        <div>
          <BlessText as="p" weight="bold">冴えない彼女の育てかた</BlessText>
          <BlessText as="p" size="xs" muted>TVアニメ公式 · joined 2014</BlessText>
        </div>
      </div>
    </BlessHoverCard>
    for updates.
  </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.

• It opens after openDelay on hover or keyboard focus and closes after closeDelay, so the pointer can move into it.
• For content that must be reachable on every device, use a Popover opened by a click.

Usage

import { BlessHoverCard } from "blessing-ui";

API

Props

Name	Type	Default	Description
placement	Placement	"bottom"
openDelay	number	400
closeDelay	number	200
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]

Slots

Name	Scope	Description
trigger	—
default	—