Hover Card

Cards

About

A link preview card that opens on hover or keyboard focus to show extra detail about where the link leads, positioned beside the trigger with the native Popover API.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hover Card to your project and fits it to your theme.

Code

How Hover Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HoverCard from "@/components/ui/hover-card";

// Ported from the project's own 'basic' example (src/routes/components/hover-card/examples/basic.svelte).
// "Ibn Sīnā" -> "IS": the original Avatar component's initials logic, reproduced here for demo content only.
function initials(name: string) {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .filter((_, i, all) => i === 0 || i === all.length - 1)
    .map((w) => [...w][0].toLocaleUpperCase())
    .join("");
}

function DemoAvatar({ name }: { name: string }) {
  return (
    <span className="hc-demo-avatar" role="img" aria-label={name}>
      <span aria-hidden="true">{initials(name)}</span>
    </span>
  );
}

export default function HoverCardDemo() {
  return (
    <div className="hc-demo-text">
      The theory of vision was rewritten by{" "}
      <HoverCard
        trigger={(props) => (
          <a href="#basic" {...props}>
            Ibn al-Haytham
          </a>
        )}
      >
        <div className="hc-demo-person">
          <DemoAvatar name="Ibn al-Haytham" />
          <div>
            <strong>Ibn al-Haytham</strong>
            <span className="hc-demo-dates">
              c. 965 – c. 1040 · Basra and Cairo
            </span>
          </div>
        </div>
        <p className="hc-demo-about">
          Showed that we see because light enters the eye, and tested it by
          experiment in his Book of Optics.
        </p>
        <p className="hc-demo-more">
          Holdings: 4 manuscripts, Bayt al-Ḥikma reading room ·{" "}
          <a href="#basic">Read more</a>
        </p>
      </HoverCard>{" "}
      in the early 11th century.
    </div>
  );
}