21 CSS Tooltips

21 hand-coded CSS tooltip templates for documentation, dashboards, editorial pages, and rich product surfaces — CAD schematic hotspot, keyboard shortcut chord pill, VS Code / Cursor IDE function hover, editorial footnote with deckle edge, Read.cv profile hover-card, RPG inventory tooltip, OED dictionary glossary card, Datadog / StatusPage.io service status dots, Superhuman command-palette reference, Airtable data-table cell, CMS content-tag card, Solari airport departures board, NYT Cooking recipe card, Stellarium constellation chart, Ptable.com periodic-table element, Lightroom photo EXIF grid, Workday org-chart node, event timeline, Figma toolbar icon pill, and a Stripe form-field help hint. Every widget uses semantic HTML with aria-describedby — the WAI-ARIA tooltip pattern for hover-or-focus content. Scoped under .tp-NN BEM for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic (Tailwind + React / Vue / Next mappings per demo).

21 pure CSSPublished May 14, 2026

01 / 21Pure CSS

Schematic Hotspot

For product diagrams and exploded views. Four pulsing red dots dot a wireframe drawing; hover any one and a leader line draws itself to a numbered callout box with part name, description, and a tiny spec table. The whole annotation reads like a CAD title block.

PublishedMay 14, 2026

02 / 21Pure CSS

Keyboard Shortcut Hint

A compact label-plus-keycap pill for productivity apps. Each tooltip wears its shortcut as little 3D keycaps that depress on a loop while the tooltip is shown — the closest pure-CSS can get to communicating "this is a real chord, try it." A 400ms delay keeps it out of the way on quick mouse passes.

PublishedMay 14, 2026

03 / 21Pure CSS

IDE Function Hover

A typed-signature documentation popover for code editors. Hover the underlined function call to reveal a stacked card — badge, namespace path, signature, prose description, parameter rows, and a docs-shortcut footer — the kind of tooltip every IDE wishes it shipped by default.

PublishedMay 14, 2026

04 / 21Pure CSS

Editorial Footnote

A sidenote for longform reading. The source word grows an underline on hover; a paper-card with a deckle clip-path drops down on a hairline tether, holds the body of the note in italic Garamond, and closes with a small all-caps citation. Made for essays, not interfaces.

PublishedMay 14, 2026

05 / 21Pure CSS

Profile Card

A rich hover-card for mentions, comments, and team rosters. Internal elements stagger in: hero glow, then portrait, then name and tagline, then stats — so the card unfolds rather than flicking on. Hover any avatar in the roster below.

PublishedMay 14, 2026

06 / 21Pure CSS

Inventory Tooltip

A rarity-tinted tooltip for games, achievements, and collectibles. Each rarity tier (common → legendary) glows its own color through the border, the stat list, and the pulsing outline. Italic flavor text closes every card the way a good item description should.

PublishedMay 14, 2026

07 / 21Pure CSS

Glossary Word Card

Dotted-underlined words in a paragraph that pop out a rich dictionary card on hover — part-of-speech tag, headword, IPA pronunciation, etymology, italic definition, usage quotation, and a row of synonym pills. Built for longform articles, language-learning sites, encyclopedias.

PublishedMay 14, 2026

08 / 21Pure CSS

Service Status Dots

A status-page list where each colored dot pulses with its service state — hovering any row reveals an uptime bar history (30 days, color-coded), live metrics (uptime, latency, throughput), and the most recent incident summary. Built for SaaS status pages, infrastructure dashboards, on-call surfaces.

PublishedMay 14, 2026

09 / 21Pure CSS

Team Avatar Card

Initials-only avatar circles in a row that lift slightly on hover and pop out a full profile card — gradient hero band, larger avatar with shadow ring, role + presence dot + bio + three-stat row + Message / View Profile buttons. Built for team rosters, mention popovers, comment hovers.

PublishedMay 14, 2026

10 / 21Pure CSS

Keyboard Shortcut Card

A list of shortcuts where each row pops out a full reference card — large action title, big keycaps, plain-English description, three "when to use" bullets, and a related-shortcuts pill row. A richer companion to the compact keycap-pill demo earlier in this collection.

PublishedMay 14, 2026

11 / 21Pure CSS

Data Table Cell

A quarterly metrics table where each plain number is a hover target. The popover shows the metric name, large value, change-vs-prior quarter, a three-bar segment breakdown (e.g. SMB / Mid / Enterprise), and a two-piece footer with delta and aggregate context. For analytics dashboards, BI reports, KPI surfaces.

PublishedMay 14, 2026

12 / 21Pure CSS

Content Tag Card

Colored pill labels (Machine Learning, DevOps, Security) that lift on hover and reveal a tag-detail card — colored icon block, article count, description, popularity-this-month bar with trend, related-tag pills, and the top three articles in this tag. For blog tag clouds, knowledge bases, content discovery surfaces.

PublishedMay 14, 2026

13 / 21Pure CSS

Airport Departures Board

A Solari-flap inspired departures board — amber-on-charcoal monospace rows for six flights. Hover any row to reveal the flight detail card: airline, route with duration, aircraft, seats, class, plus a status pill that pulses when a flight is boarding. For travel apps, status pages, and ops dashboards.

PublishedMay 14, 2026

14 / 21Pure CSS

Recipe Ingredient Card

A warm cookbook page where ingredient names carry dotted underlines. Hover one and a side card lifts in with nutrition facts, substitution suggestions, and a sourcing note — designed for recipe sites, meal-plan apps, food databases.

PublishedMay 14, 2026

15 / 21Pure CSS

Orion Constellation Chart

A starfield rendering of the Orion constellation with six labeled star hotspots — Rigel, Betelgeuse, Bellatrix, Alnilam, Saiph, Meissa. Each star pops a card with real astronomical data: Bayer designation, distance, magnitude, luminosity, and a five-star brightness gauge.

PublishedMay 14, 2026

16 / 21Pure CSS

Periodic Table Element

Periodic-table tiles for the first three periods, color-coded by element category (nonmetal, alkali, halogen, noble, metalloid, etc.). Hover any tile and a card lifts in with atomic number, mass, electron configuration, melting/boiling points, and discovery credit.

PublishedMay 14, 2026

17 / 21Pure CSS

Photo EXIF Grid

A dark contact-sheet grid of eight gradient photographs. Hover any cell to lift a developer-tools-style card with full EXIF metadata — camera body, lens, aperture, shutter, ISO, focal length, white balance, and location. For photo portfolios and stock catalogs.

PublishedMay 14, 2026

18 / 21Pure CSS

Org Chart Node

A three-tier org chart with CEO → C-suite → leads. Hover any node to lift a profile card with gradient hero, avatar monogram, role + department pill, three stats (reports/org size/tenure), and a footer with email + timezone. For team directories, succession-planning UIs, internal wikis.

PublishedMay 14, 2026

19 / 21Pure CSS

Event Timeline

A horizontal seven-event company timeline (seed → IPO) with alternating labels above and below the track. Hovering any dot reveals an event card with quarter, headline, body prose, and a metric badge (valuation, ARR, market cap). For about pages, investor pages, retrospectives.

PublishedMay 14, 2026

20 / 21Pure CSS

Icon Toolbar

Unlabeled toolbar icons — bold, italic, link, image, code, list, settings — that reveal their action name on hover. The tooltip is a compact dark pill with a tail arrow, the workhorse pattern every desktop app ships and every web app should. For editors, design tools, dashboards.

PublishedMay 14, 2026

21 / 21Pure CSS

Form Field Help

Compact help circles sit next to form labels and reveal a one-line hint on hover — username rules, email visibility, time-zone purpose. The tooltip pops to the right with a side-arrow tail so the form line stays uninterrupted. For settings panels, sign-up forms, and profile editors.

PublishedMay 14, 2026

FAQ

Frequently asked questions

What is a CSS tooltip?

A tooltip is a small panel of additional information revealed on hover (or focus) over a trigger element. The simplest tooltips are single-line labels; the richest are full documentation cards with prose, code, links, charts, and metadata. The behavior is consistent — absolutely-positioned child, opacity transition on :hover — but the typography, density, and motion belong to each individual use case. This collection treats twenty-one different use cases as twenty-one different design opportunities rather than twenty-one skins of the same gray rectangle.

How do I keep tooltip styles from leaking between demos?

Every demo in this collection is namespaced under a unique numeric prefix — .tp-01, .tp-02, .tp-03 and so on through .tp-21 — with BEM-style children like .tp-01__paper, .tp-01__note, .tp-01__hot. No demo defines a .tooltip or .tip class that could collide with anything else. You can drop any two of these onto the same page with zero style bleed. Adding a twenty-second tooltip is a matter of picking .tp-22 and scoping every selector under it.

Are these accessible?

These demos are hover-only and that's a real limitation. For production, you must add :focus-visible (or :focus-within) to every hover selector so keyboard users can reach the tooltip, and you must wire aria-describedby on the trigger pointing at the tooltip's id so screen readers announce the content. Tooltips that carry meaningful information (not just labels) also need to be dismissible without leaving the trigger — that requires a small piece of JavaScript and the Escape key. The CSS scaffolding is the easy part; production-grade tooltip accessibility is non-trivial. The W3C ARIA Authoring Practices Guide has the full pattern.

Do tooltips need JavaScript?

All twenty-one demos in this collection are pure CSS — no JavaScript required for hover, transition, animation, or the embedded data visualizations (status uptime bars, segment breakdown bars, popularity bars, departures-board pulse, brightness gauges). The keycap-press loop on the keyboard demo is a CSS animation. The bar widths and stat values are inline style attributes so adapting them to your data is a string replacement. JavaScript only enters the picture for full keyboard support, focus management, and dismissibility — the things the W3C ARIA tooltip pattern requires for production use.

When should I use a tooltip versus a popover?

Use a tooltip when the content is supplementary (labels, shortcuts, brief definitions, lightweight metadata) and the user shouldn't have to interact with the panel itself. Use a popover when the content is interactive — buttons, forms, links to follow, copy-to-clipboard actions. The IDE function-hover, profile-card, team-avatar, and keyboard-shortcut-card demos in this collection contain action buttons or links and are technically popovers by that definition, but they're built on the same CSS scaffolding. The structural difference is pointer-events: none on a tooltip versus pointer-events: auto on a popover, plus keyboard / focus behavior for interactive panels.

How do I adapt the data-rich tooltips to real data?

About half the demos render embedded data — service uptime bars, RPG stat lines, schematic spec rows, data-table segment breakdowns, content-tag popularity bars, departures-board metrics, periodic-table properties, EXIF settings. Each demo's data is plain HTML — for the bar charts, widths are inline style="width:62%" so a templating engine swap is trivial. For the table cell and departures tooltips, the percentages and the change-vs-prior text are real strings, not generated. Keep the markup structure, replace the content.

Why fonts from Google Fonts instead of system fonts?

Each demo's typography is part of its argument — Fraunces gives the editorial footnote its essay voice, Cinzel gives the RPG tooltip its medieval weight, JetBrains Mono gives the IDE and status demos their developer feel, EB Garamond gives the glossary card its dictionary look. System fonts would homogenize the collection into the same flat affect. The single @import declaration in the first demo loads every font family the collection needs, in one network round-trip. If you ship only one demo, drop the families you don't use from the @import URL.

Related collections

30 CSS Badges

30 hand-coded CSS badges for status indicators, notifications, membership tiers, live-data displays, and SEO / DevOps / financial dashboards — upload progress, typing indicator, transit line status, Core Web Vitals, ECG heartbeat, CI/CD build pipeline, countdown ring, live price ticker, keycap shortcut, wax seal, conference lanyard, and holographic collectibles. Copy-paste HTML and CSS, WCAG 2.2 accessible, MIT licensed.

20 CSS Banners & Alerts

20 hand-coded CSS banner and alert bars for e-commerce storefronts, SaaS dashboards, marketing sites, and compliance-bound products. Covers GDPR cookie consent with a real preferences panel, promo bars with countdown timers, free-shipping threshold progress, app-install smart banners, maintenance and incident status bars, newsletter signup bars, age verification gates, limited-stock urgency banners, live event announcements, browser upgrade notices, geo and currency switchers, sticky top announcement bars, bottom cookie bars, inline form validation alerts, icon-aligned alert banners, left-border accent alerts, diagonal stripe promos, full-width hero banners, animated gradient border alerts, and a text-wrapping laboratory that shows five strategies for the unbreakable string that breaks more banners than anything else. Every bar is scoped under a .ba-NN prefix for no-collision pasting, guards prefers-reduced-motion, carries the correct aria-live and role semantics, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.

25 CSS Blockquotes

25 hand-coded CSS blockquote designs for SaaS testimonials, editorial pull quotes, documentation callouts, and developer engineering blogs: large decorative quotation marks with ::before / ::after glyphs, Tailwind CSS blockquote component, pure CSS callout / admonition boxes for Docusaurus / Mintlify / Nextra documentation, responsive center-aligned quote banners, modern minimalist left-border editorial style, animated CSS gradient border, classic left border, brutalist high-contrast, glassmorphism frosted card, glowing neon border, article pull quote with text-wrap, speech bubble chat-style, thick vertical accent rail, customer testimonial cards with avatar and star rating, inline highlighted text, marker highlight underline, floating drop-shadow, aurora gradient background, Twitter / X card style, multi-column newspaper editorial, IDE code-comment style, Markdown-compatible defaults, JavaScript testimonial quote slider, expandable read-more, and one-click copy button. 22 Pure CSS + 3 Light JS (slider, expand, copy). Every design scoped under .bq-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, WCAG 2.2 AA accessible, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).