Marketing Tooltip
The marketing site's explainer tooltip — a bordered card with a notched tail, for prose, figures, or a tip with a link.
Every dollar raised provides groceries for 5 individuals.
So far we've reached 64,264 lives.
Every organization is independently vetted.
Installation
pnpm dlx shadcn@latest add @ffg/marketing-tooltipUsage
"use client"
import { MarketingTooltip, NoteTerm } from "@/components/ui/marketing-tooltip";
// Prose
<NoteTerm tip="Enough groceries to feed five people for a week.">5 individuals</NoteTerm>
// Figure: serif value over a caption
<NoteTerm tip={{ value: "64,264", label: "lives reached in 2026." }}>64,264 lives</NoteTerm>
// With a link: opens as a popover so keyboard users can reach the button
<MarketingTooltip
className="underline"
tip={{ text: "We evaluate every organization for outcomes.", action: { label: "How we vet", href: "/vetting" } }}
onNavigate={(href) => router.push(href)}
>
independently vetted
</MarketingTooltip>Unlike Tooltip's filled chip, this is a popover-surface card whose tail
continues the card's border.
- NoteTerm — the plain underline treatment for figures inside sentences
- MarketingTooltip — the bare trigger; style it yourself, or see
GradientTerm - tip — a string,
{ value, label }, or{ text, action } - onNavigate — intercepts the action link (e.g.
router.push)