21 CSS Tooltips07 / 21

Pure CSSMIT licensed

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.

Published

Live Demo
Try it

The code

<div class="tp-07">
  <div class="tp-07__inner">
    <p class="tp-07__text">
      There is a word for the smell of rain on dry earth —
      <span class="tp-07__t">
        <span class="tp-07__word">petrichor</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">noun · meteorology</span>
            <span class="tp-07__head">petrichor</span>
            <span class="tp-07__ipa">/ˈpɛtrɪkɔːr/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Greek <em>petra</em> (stone) + <em>ichor</em> (the ethereal fluid said to flow through the veins of gods). Coined 1964 by Bear &amp; Thomas.</span>
          <span class="tp-07__def">The pleasant, earthy scent that arises when rain falls on dry soil, produced by geosmin released from actinobacteria.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"The petrichor that rose from the cracked earth was the first sign that the long drought had broken."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">geosmin</span>
            <span class="tp-07__syn-pill">earthy scent</span>
            <span class="tp-07__syn-pill">rain smell</span>
          </span>
        </span>
      </span>
      — a sensation so specific it once had no name. Equally unnamed was
      <span class="tp-07__t">
        <span class="tp-07__word">sonder</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">noun · neologism</span>
            <span class="tp-07__head">sonder</span>
            <span class="tp-07__ipa">/ˈsɒndər/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Coined by John Koenig in <em>The Dictionary of Obscure Sorrows</em> (2012). Likely influenced by French <em>sonder</em> (to probe, to fathom).</span>
          <span class="tp-07__def">The sudden realization that every passerby is living a life as vivid and complex as one's own — filled with ambitions, fears, and an intricate private world.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"Staring out the train window, she was struck by sonder — each lit window a whole life she'd never know."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">empathy</span>
            <span class="tp-07__syn-pill">weltanschauung</span>
          </span>
        </span>
      </span>,
      the act of registering that strangers have entire interior worlds. We live in
      <span class="tp-07__t">
        <span class="tp-07__word">liminal</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">adjective · anthropology</span>
            <span class="tp-07__head">liminal</span>
            <span class="tp-07__ipa">/ˈlɪmɪnəl/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Latin <em>limen</em> (threshold). Popularised by anthropologist Arnold van Gennep (1909) to describe transitional ritual phases.</span>
          <span class="tp-07__def">Occupying a position at, or on both sides of, a threshold or boundary; relating to a transitional or initial stage of a process.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"The airport is the most liminal of spaces — everyone passing through on the way to somewhere else."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">transitional</span>
            <span class="tp-07__syn-pill">threshold</span>
            <span class="tp-07__syn-pill">interstitial</span>
          </span>
        </span>
      </span>
      spaces more than we realise.
    </p>
  </div>
</div>
.tp-07 {
  width: 100%;
  min-height: 100vh;
  background: #fdf9f3;
  /* Top room for the dictionary card (~280px tall) popping up from
       dotted-underlined words. Glossary words can be anywhere on the
       line, so generous top is the safest choice. */
  padding: 300px 28px 40px;
  font-family: Georgia, serif;
}

.tp-07__inner {
  max-width: 560px;
  margin: 0 auto;
}

.tp-07__text {
  font-size: 18px;
  line-height: 1.85;
  color: #2c2416;
  margin: 0;
}

.tp-07__t {
  position: relative;
  display: inline-block;
}

.tp-07__word {
  cursor: help;
  border-bottom: 1.5px dotted #a08050;
  color: #6a4820;
  transition: color .15s, border-color .15s;
}

.tp-07__t:hover .tp-07__word {
  color: #3a2010;
  border-bottom-color: #3a2010;
}

.tp-07__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 320px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(160, 128, 80, 0.2);
  box-shadow: 0 8px 36px rgba(60, 40, 10, 0.13), 0 2px 8px rgba(60, 40, 10, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  font-family: Georgia, serif;
  text-align: left;
  display: block;
  white-space: normal;
}

.tp-07__t:hover .tp-07__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.tp-07__top {
  display: block;
  padding: 16px 18px 12px;
  background: #faf6ef;
  border-bottom: 1px solid rgba(160, 128, 80, 0.12);
}

.tp-07__pos {
  display: block;
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b09060;
  margin-bottom: 5px;
}

.tp-07__head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  color: #1a1008;
  line-height: 1;
  margin-bottom: 4px;
}

.tp-07__ipa {
  display: block;
  font-size: 12px;
  color: #a09070;
  font-style: italic;
}

.tp-07__origin {
  display: block;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #9a8060;
  line-height: 1.5;
}

.tp-07__origin strong {
  color: #6a5030;
  font-weight: 500;
}

.tp-07__def {
  display: block;
  padding: 13px 18px;
  font-size: 13px;
  color: #3c2c14;
  line-height: 1.65;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-style: italic;
}

.tp-07__ex {
  display: block;
  padding: 11px 18px 13px;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #8a7050;
}

.tp-07__ex-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c0a878;
  margin-bottom: 5px;
}

.tp-07__ex-quote {
  display: block;
  color: #5a4020;
  line-height: 1.5;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
}

.tp-07__syn {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 18px 13px;
  border-top: 1px solid rgba(160, 128, 80, 0.1);
}

.tp-07__syn-pill {
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(160, 128, 80, 0.08);
  color: #8a6840;
  border: 1px solid rgba(160, 128, 80, 0.18);
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Tooltip from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Glossary Word Card
Source: https://codefronts.com/snippets/css-tooltips/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.
## HTML
```html
<div class="tp-07">
  <div class="tp-07__inner">
    <p class="tp-07__text">
      There is a word for the smell of rain on dry earth —
      <span class="tp-07__t">
        <span class="tp-07__word">petrichor</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">noun · meteorology</span>
            <span class="tp-07__head">petrichor</span>
            <span class="tp-07__ipa">/ˈpɛtrɪkɔːr/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Greek <em>petra</em> (stone) + <em>ichor</em> (the ethereal fluid said to flow through the veins of gods). Coined 1964 by Bear &amp; Thomas.</span>
          <span class="tp-07__def">The pleasant, earthy scent that arises when rain falls on dry soil, produced by geosmin released from actinobacteria.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"The petrichor that rose from the cracked earth was the first sign that the long drought had broken."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">geosmin</span>
            <span class="tp-07__syn-pill">earthy scent</span>
            <span class="tp-07__syn-pill">rain smell</span>
          </span>
        </span>
      </span>
      — a sensation so specific it once had no name. Equally unnamed was
      <span class="tp-07__t">
        <span class="tp-07__word">sonder</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">noun · neologism</span>
            <span class="tp-07__head">sonder</span>
            <span class="tp-07__ipa">/ˈsɒndər/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Coined by John Koenig in <em>The Dictionary of Obscure Sorrows</em> (2012). Likely influenced by French <em>sonder</em> (to probe, to fathom).</span>
          <span class="tp-07__def">The sudden realization that every passerby is living a life as vivid and complex as one's own — filled with ambitions, fears, and an intricate private world.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"Staring out the train window, she was struck by sonder — each lit window a whole life she'd never know."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">empathy</span>
            <span class="tp-07__syn-pill">weltanschauung</span>
          </span>
        </span>
      </span>,
      the act of registering that strangers have entire interior worlds. We live in
      <span class="tp-07__t">
        <span class="tp-07__word">liminal</span>
        <span class="tp-07__tip">
          <span class="tp-07__top">
            <span class="tp-07__pos">adjective · anthropology</span>
            <span class="tp-07__head">liminal</span>
            <span class="tp-07__ipa">/ˈlɪmɪnəl/</span>
          </span>
          <span class="tp-07__origin"><strong>Origin:</strong> Latin <em>limen</em> (threshold). Popularised by anthropologist Arnold van Gennep (1909) to describe transitional ritual phases.</span>
          <span class="tp-07__def">Occupying a position at, or on both sides of, a threshold or boundary; relating to a transitional or initial stage of a process.</span>
          <span class="tp-07__ex">
            <span class="tp-07__ex-label">In use</span>
            <span class="tp-07__ex-quote">"The airport is the most liminal of spaces — everyone passing through on the way to somewhere else."</span>
          </span>
          <span class="tp-07__syn">
            <span class="tp-07__syn-pill">transitional</span>
            <span class="tp-07__syn-pill">threshold</span>
            <span class="tp-07__syn-pill">interstitial</span>
          </span>
        </span>
      </span>
      spaces more than we realise.
    </p>
  </div>
</div>
```
## CSS
```css
.tp-07 {
  width: 100%;
  min-height: 100vh;
  background: #fdf9f3;
  /* Top room for the dictionary card (~280px tall) popping up from
       dotted-underlined words. Glossary words can be anywhere on the
       line, so generous top is the safest choice. */
  padding: 300px 28px 40px;
  font-family: Georgia, serif;
}

.tp-07__inner {
  max-width: 560px;
  margin: 0 auto;
}

.tp-07__text {
  font-size: 18px;
  line-height: 1.85;
  color: #2c2416;
  margin: 0;
}

.tp-07__t {
  position: relative;
  display: inline-block;
}

.tp-07__word {
  cursor: help;
  border-bottom: 1.5px dotted #a08050;
  color: #6a4820;
  transition: color .15s, border-color .15s;
}

.tp-07__t:hover .tp-07__word {
  color: #3a2010;
  border-bottom-color: #3a2010;
}

.tp-07__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 320px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(160, 128, 80, 0.2);
  box-shadow: 0 8px 36px rgba(60, 40, 10, 0.13), 0 2px 8px rgba(60, 40, 10, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  font-family: Georgia, serif;
  text-align: left;
  display: block;
  white-space: normal;
}

.tp-07__t:hover .tp-07__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.tp-07__top {
  display: block;
  padding: 16px 18px 12px;
  background: #faf6ef;
  border-bottom: 1px solid rgba(160, 128, 80, 0.12);
}

.tp-07__pos {
  display: block;
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b09060;
  margin-bottom: 5px;
}

.tp-07__head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  color: #1a1008;
  line-height: 1;
  margin-bottom: 4px;
}

.tp-07__ipa {
  display: block;
  font-size: 12px;
  color: #a09070;
  font-style: italic;
}

.tp-07__origin {
  display: block;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-size: 11px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #9a8060;
  line-height: 1.5;
}

.tp-07__origin strong {
  color: #6a5030;
  font-weight: 500;
}

.tp-07__def {
  display: block;
  padding: 13px 18px;
  font-size: 13px;
  color: #3c2c14;
  line-height: 1.65;
  border-bottom: 1px solid rgba(160, 128, 80, 0.1);
  font-style: italic;
}

.tp-07__ex {
  display: block;
  padding: 11px 18px 13px;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #8a7050;
}

.tp-07__ex-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c0a878;
  margin-bottom: 5px;
}

.tp-07__ex-quote {
  display: block;
  color: #5a4020;
  line-height: 1.5;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
}

.tp-07__syn {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 18px 13px;
  border-top: 1px solid rgba(160, 128, 80, 0.1);
}

.tp-07__syn-pill {
  font-size: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(160, 128, 80, 0.08);
  color: #8a6840;
  border: 1px solid rgba(160, 128, 80, 0.18);
}
```

How this works

The paragraph inside .tp-07__text flows at 18px Georgia with 1.85 line-height, matching the density of a printed encyclopedia entry. Each glossary term is wrapped in .tp-07__t, an inline-block anchor that carries the tooltip's positioning context without breaking the surrounding text run. The term itself sits in .tp-07__word with a 1.5px dotted #a08050 underline and the traditional cursor: help, the tell that a hover-card lives beneath.

The tooltip is a 320px card printed on #fff against the warm #fdf9f3 page background, framed by a 10px radius and a two-layer shadow that lands at rgba(60, 40, 10, 0.13) — a soft parchment shadow rather than a hard drop. Typography borrows directly from the OED and Merriam-Webster hover pattern: an uppercase Inter part-of-speech tag in #b09060, a 24px Georgia headword, an italic IPA line in #a09070, an etymology block that italicises the source languages, an italic definition set on a warmer #3c2c14 ink, and a Georgia italic usage quotation. Synonym pills close the card as capsule-radius .tp-07__syn-pill chips at 10px Inter with a warm 8% amber wash.

Reveal happens through .tp-07__t:hover .tp-07__tip, which lifts opacity from 0 to 1 and slides the transform up 4px on a cubic-bezier(0.22, 1, 0.36, 1) curve. The visibility property flips through a delayed transition so the tooltip is unreachable to pointer events when closed. Everything is copy-paste, hand-coded, SSR-safe, framework-agnostic, and scoped under .tp-07 with BEM naming.

Make it yours

  • Swap the palette for a cooler encyclopedia register by shifting the page background from #fdf9f3 to a Wikipedia-style #f8f9fa, changing the underline and pill accents from amber #a08050 to a slate #5b6270, and reducing the shadow warmth to a neutral rgba(0, 0, 0, 0.08).
  • Add an audio pronunciation button next to .tp-07__ipa by inserting a button child that triggers the Web Speech API on click; keep it inside .tp-07__top so it inherits the header padding and border-bottom rhythm.
  • Expose grammatical detail by extending .tp-07__pos with an inflection line — plural forms, verb conjugations, comparative and superlative adjectives — placed above the definition and inheriting the same 10px Inter tracking so the section reads as one editorial voice.
  • Turn synonyms into linked cross-references by wrapping each .tp-07__syn-pill in an anchor tag pointing to its own glossary page; the pill's rgba(160, 128, 80, 0.08) background survives the anchor's default text-decoration if you set text-decoration: none on the child.
  • Repurpose the card as a footnote surface for longform prose by shrinking the width to 260px and hiding the etymology and synonym rows through a modifier class such as .tp-07__tip--compact; the semantic span structure lets you toggle sections without reflowing the article.

Gotchas — read before shipping

  • The card sits bottom: calc(100% + 10px) above each word, so a term near the top of the viewport will render its card partially clipped by the browser chrome. On articles with a sticky top navbar, add a scroll-margin-top on .tp-07__t or fall back to Anchor Positioning's position-try where supported so the card flips below the word when space is tight.
  • The dotted underline is the only affordance that a term is interactive. Users on high-density displays or with reduced vision may miss it — reinforce with a subtle background-color: rgba(160, 128, 80, 0.06) on .tp-07__word to meet WCAG SC 1.4.11 non-text contrast for interactive components at 3:1.
  • The tooltip opens on hover only. Keyboard and touchscreen users are locked out — swap the wrapper to a native button with a matching :focus-visible selector, or migrate to the Popover API with popovertarget so click and Enter both fire, satisfying WCAG SC 2.1.1.
  • Long words trigger a hover-then-lose-hover chase if the card overlaps the next line of prose. Add a small padding-top gap of 4-6px on .tp-07__tip so the pointer can travel from word to card without crossing a hover-gap, or extend the trigger area by giving .tp-07__t a transparent ::after bridge (WCAG SC 2.5.5 target-size relief).
  • The card contains rich markup — strong for the origin label, em for etymological source words. Screen readers announce all of this on focus, so keep the content lean or hide decorative pieces with aria-hidden="true"; a bloated announcement fatigues assistive-tech users faster than sighted readers.
  • MDX and Markdown-driven pipelines will strip the inline span wrappers if the parser normalises whitespace between prose and inline elements. Author the glossary as a component that emits the exact class hierarchy from a data source instead of relying on hand-authored inline markup, otherwise the underline appears without the anchor context.

Browser support

ChromeSafariFirefoxEdge
88+14+78+88+

The card leans on inline-block layout, calc(), and standard transitions — all baseline. The transition-delay trick on visibility works identically across engines. If you enable Anchor Positioning fallbacks for viewport edges, keep the current absolute-positioning path as the non-supporting branch through @supports.

Techniques used in this demo

box-shadowMDN ↗transitionMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →