Info Popover

tooltip x card

Rich popover with title, description, and image. From Animate UI.

popovertooltipinfoanimateui

Code

popover-info.tsx

"use client";
import { useState } from "react";

export function InfoPopover({ trigger, title, body }: { trigger: string; title: string; body: string }) {
  const [show, setShow] = useState(false);
  return (
    <div className="relative inline-block"
      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
      <button onFocus={() => setShow(true)} onBlur={() => setShow(false)}
        className="rounded-lg border border-border px-4 py-2 text-sm">{trigger}</button>
      {show && (
        <div role="tooltip" className="absolute bottom-full left-1/2 z-20 mb-2 w-48 -translate-x-1/2 animate-[fadeIn_0.2s_ease-out] rounded-lg border border-border bg-card p-3 shadow-lg">
          <h4 className="text-sm font-medium">{title}</h4>
          <p className="mt-1 text-xs text-muted-foreground">{body}</p>
        </div>
      )}
    </div>
  );
}

globals.css: @keyframes fadeIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Info Popover component and wire it to my accent.”