21 CSS Tooltips
A CSS tooltip is a hover-revealed information panel — anything from a one-line button label to a full documentation card with charts and metadata. These 21 hand-coded CSS tooltips cover the most common use cases on the modern web — compact labels, contextual help, hover cards, and rich data popovers. Every demo is namespaced under its own CSS prefix so two tooltips on the same page never collide. Pure CSS hover, no JavaScript. Layer keyboard focus and aria-describedby on top for production accessibility.
02 / 21
Keyboard Shortcut Hint
Pure CSS 
A compact label-plus-keycap pill for productivity apps.
03 / 21
IDE Function Hover
Pure CSS 
A typed-signature documentation popover for code editors.
05 / 21
Profile Card
Pure CSS 
A rich hover-card for mentions, comments, and team rosters.
06 / 21
Inventory Tooltip
Pure CSS 
A rarity-tinted tooltip for games, achievements, and collectibles.
07 / 21
Glossary Word Card
Pure CSS 
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.
08 / 21
Service Status Dots
Pure CSS 
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.
09 / 21
Team Avatar Card
Pure CSS 
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.
10 / 21
Keyboard Shortcut Card
Pure CSS 
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.
11 / 21
Data Table Cell
Pure CSS 
A quarterly metrics table where each plain number is a hover target.
12 / 21
Content Tag Card
Pure CSS 
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.
13 / 21
Airport Departures Board
Pure CSS 
A Solari-flap inspired departures board — amber-on-charcoal monospace rows for six flights.
14 / 21
Recipe Ingredient Card
Pure CSS 
A warm cookbook page where ingredient names carry dotted underlines.
15 / 21
Orion Constellation Chart
Pure CSS 
A starfield rendering of the Orion constellation with six labeled star hotspots — Rigel, Betelgeuse, Bellatrix, Alnilam, Saiph, Meissa.
16 / 21
Periodic Table Element
Pure CSS 
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.
17 / 21
Photo EXIF Grid
Pure CSS 
A dark contact-sheet grid of eight gradient photographs.
19 / 21
Event Timeline
Pure CSS 
A horizontal seven-event company timeline (seed → IPO) with alternating labels above and below the track.
20 / 21
Icon Toolbar
Pure CSS 
Unlabeled toolbar icons — bold, italic, link, image, code, list, settings — that reveal their action name on hover.
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 its own CSS class prefix — `.ide-`, `.edn-`, `.pc-`, `.schem-`, `.rpg-`, `.gloss-`, `.svc-`, `.avt-`, `.kchord-`, `.tcell-`, `.ctag-`, `.depart-`, `.ringd-`, `.orion-`, `.elm-`, `.exif-`, `.org-`, `.tline-`, `.tbar-`, `.fhelp-`, `.kbd-` — with zero shared base class names. 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. If you write a twenty-second tooltip, pick a new short kebab prefix and scope 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
30 hand-coded CSS badges spanning collectibles, status indicators, certifications, notifications, membership tiers, and live-data displays. Upload progress, typing indicator, scrabble tile, keycap shortcut, transit indicator, origami medal, hreflang, E-E-A-T, crawl status, schema, search intent, core web vitals, ECG, build pipeline, countdown, live price, file extension, dice, signal bars, reading time, aurora, vaporwave, risograph, wax seal, conference lanyard, botanical tier, cyberpunk glitch, art deco, brutalist status, holographic.
css badge badge design upload progress
Responsive
14 CSS Banners & Alerts
14
Hand-coded CSS banner and alert patterns covering every notification surface a real product needs — dismissible alerts, sticky announcements, semantic status alerts, cookie consent, form validation, toasts, live-update banners, and promotional hero banners. Pure CSS plus scoped JS — no framework, semantic HTML, accessibility-first, copy-paste ready.
banner alert notification
Responsive
19 CSS Blockquote Designs
19
19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.
blockquote css blockquote pull quote
Responsive