Social Hover Card

An inline mention that opens a profile preview: banner, avatar, bio, count-up stats and a follow button. On a hover-capable device it opens after a delay and closes on a shorter one; on touch and keyboard it opens immediately and stays until you dismiss it.

The card flips above the mention when there is not enough room below, and it never opens on a hover device from a click — a click there is a selection, not a request.

Usage

Pass a profile object and leave the trigger slot alone to render @handle as the inline mention. Pass following to control the follow state from the parent; leave it undefined and the card manages its own.

<template>
  <div class="w-full max-w-lg rounded-2xl border border-default p-6">
    <div class="mb-4 text-sm leading-relaxed">
      Built by
      <MSocialHoverCard
        :profile="mara"
        placement="bottom"
        @follow:change="following = $event"
      />
      and shipped alongside
      <MSocialHoverCard :profile="ilya" />
      .
    </div>

    <UBadge
      :label="following ? 'Following Mara' : 'Not following'"
      :color="following ? 'success' : 'neutral'"
      variant="subtle"
    />
  </div>
</template>

<script setup lang="ts">
const following = ref(false)

const mara = {
  id: 'mara-fjeld',
  name: 'Mara Fjeld',
  handle: 'marafjeld',
  avatar: 'https://randomuser.me/api/portraits/women/32.jpg',
  banner: 'https://picsum.photos/seed/mara-banner/640/160',
  bio: 'Rendering engineer. Spends her weekends writing about colour science and specular surfaces.',
  url: 'https://example.com/mara',
  verified: true,
  stats: [
    { label: 'Projects', value: 128 },
    { label: 'Followers', value: 18400 },
    { label: 'Following', value: 312 },
  ],
}

const ilya = {
  id: 'ilya-brandt',
  name: 'Ilya Brandt',
  handle: 'ilyabrandt',
  avatar: 'https://randomuser.me/api/portraits/men/75.jpg',
  bio: 'Interaction designer, motion first.',
  verified: false,
  stats: [
    { label: 'Followers', value: 2410 },
  ],
}
</script>

Customize

Profile shape

profile is the only required prop and the only real interface. avatar, handle, id and name are required; everything else is optional and its absence is handled — no banner draws a gradient, no bio draws nothing, no stats draws no row.

Stat label is used as the key for the count-up, so two stats in one profile must not share a label.

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.socialHoverCard in app.config.ts.

Accessibility

The trigger is a real <button> with aria-haspopup="dialog" and an aria-expanded that tracks the open state. The card itself carries role="dialog" with an aria-label of "<name> profile preview" — but only when it was opened by focus or click. A hover-opened card deliberately stays out of the accessibility tree, because a card that appears because the mouse happened to be there is not something a screen-reader user asked for. The id on the card is namespaced from profile.id; note the trigger does not reference it with aria-controls.

Keyboard: focus opens the card immediately; Escape closes it and returns focus to the trigger, with a guard so that returning focus does not immediately reopen it. focusout closes it whenever focus leaves the wrapper, which includes tabbing into the follow button or the profile link and back out. On a hover-capable device the click handler returns early, so clicking the mention selects the text instead of toggling the card.

The follow button carries aria-pressed, so its state is announced rather than only looked at, and its label cross-fades between "Follow" and "Following". The verified badge is an icon plus an sr-only "Verified account", because the badge alone carries no text. The avatar's alt is the display name; the banner is decorative and gets alt="".

prefers-reduced-motion removes the card's scale and opacity transitions and the follow-label cross-fade, and the stats skip the count-up entirely — the final numbers are written straight in instead.

Performance

• All numeric stats count up from zero on a single requestAnimationFrame loop, not one per stat. It is cancelled when the card closes and on unmount, and restarted from zero each time the card opens.
• Open and close are two setTimeouts that cancel each other, cleared on every state change and on unmount. There is no polling and no observer.
• Hover intent is gated on (hover: hover) and (pointer: fine), so touch devices never arm a hover timer or attach the pointer handlers' work at all.
• The frame timestamp can predate the performance.now() captured at the start of the count-up, so progress is clamped to 0..1 before it is eased — otherwise the first frame can render a negative count.
• motion.div layout wraps only the follow button, so the label cross-fade is measured on that button alone rather than on the whole card.
• The card is v-if'd inside AnimatePresence, so it is not in the DOM while closed. Its images are only fetched once it first opens, unless the browser speculates otherwise — expect a small delay on that first open.