21 CSS Tooltips 07 / 21

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.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="gloss-stage">
  <div class="gloss-inner">
    <p class="gloss-text">
      There is a word for the smell of rain on dry earth —
      <span class="gloss-t">
        <span class="gloss-word">petrichor</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">noun · meteorology</span>
            <span class="gloss-head">petrichor</span>
            <span class="gloss-ipa">/ˈpɛtrɪkɔːr/</span>
          </span>
          <span class="gloss-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="gloss-def">The pleasant, earthy scent that arises when rain falls on dry soil, produced by geosmin released from actinobacteria.</span>
          <span class="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-ex-quote">"The petrichor that rose from the cracked earth was the first sign that the long drought had broken."</span>
          </span>
          <span class="gloss-syn">
            <span class="gloss-syn-pill">geosmin</span>
            <span class="gloss-syn-pill">earthy scent</span>
            <span class="gloss-syn-pill">rain smell</span>
          </span>
        </span>
      </span>
      — a sensation so specific it once had no name. Equally unnamed was
      <span class="gloss-t">
        <span class="gloss-word">sonder</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">noun · neologism</span>
            <span class="gloss-head">sonder</span>
            <span class="gloss-ipa">/ˈsɒndər/</span>
          </span>
          <span class="gloss-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="gloss-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="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-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="gloss-syn">
            <span class="gloss-syn-pill">empathy</span>
            <span class="gloss-syn-pill">weltanschauung</span>
          </span>
        </span>
      </span>,
      the act of registering that strangers have entire interior worlds. We live in
      <span class="gloss-t">
        <span class="gloss-word">liminal</span>
        <span class="gloss-tip">
          <span class="gloss-top">
            <span class="gloss-pos">adjective · anthropology</span>
            <span class="gloss-head">liminal</span>
            <span class="gloss-ipa">/ˈlɪmɪnəl/</span>
          </span>
          <span class="gloss-origin"><strong>Origin:</strong> Latin <em>limen</em> (threshold). Popularised by anthropologist Arnold van Gennep (1909) to describe transitional ritual phases.</span>
          <span class="gloss-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="gloss-ex">
            <span class="gloss-ex-label">In use</span>
            <span class="gloss-ex-quote">"The airport is the most liminal of spaces — everyone passing through on the way to somewhere else."</span>
          </span>
          <span class="gloss-syn">
            <span class="gloss-syn-pill">transitional</span>
            <span class="gloss-syn-pill">threshold</span>
            <span class="gloss-syn-pill">interstitial</span>
          </span>
        </span>
      </span>
      spaces more than we realise.
    </p>
  </div>
</div>
.gloss-stage {
  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;
}
.gloss-inner {
  max-width: 560px;
  margin: 0 auto;
}
.gloss-text {
  font-size: 18px;
  line-height: 1.85;
  color: #2c2416;
  margin: 0;
}
.gloss-t {
  position: relative;
  display: inline-block;
}
.gloss-word {
  cursor: help;
  border-bottom: 1.5px dotted #a08050;
  color: #6a4820;
  transition: color .15s, border-color .15s;
}
.gloss-t:hover .gloss-word {
  color: #3a2010;
  border-bottom-color: #3a2010;
}
.gloss-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;
}
.gloss-t:hover .gloss-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.gloss-top {
  display: block;
  padding: 16px 18px 12px;
  background: #faf6ef;
  border-bottom: 1px solid rgba(160, 128, 80, 0.12);
}
.gloss-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;
}
.gloss-head {
  display: block;
  font-size: 24px;
  font-weight: 500;
  color: #1a1008;
  line-height: 1;
  margin-bottom: 4px;
}
.gloss-ipa {
  display: block;
  font-size: 12px;
  color: #a09070;
  font-style: italic;
}
.gloss-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;
}
.gloss-origin strong { color: #6a5030; font-weight: 500; }
.gloss-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;
}
.gloss-ex {
  display: block;
  padding: 11px 18px 13px;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #8a7050;
}
.gloss-ex-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c0a878;
  margin-bottom: 5px;
}
.gloss-ex-quote {
  display: block;
  color: #5a4020;
  line-height: 1.5;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
}
.gloss-syn {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 18px 13px;
  border-top: 1px solid rgba(160, 128, 80, 0.1);
}
.gloss-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);
}

More from 21 CSS Tooltips

IDE Function HoverEditorial FootnoteProfile CardInventory TooltipService Status DotsTeam Avatar CardKeyboard Shortcut CardData Table CellContent Tag CardAirport Departures BoardRecipe Ingredient CardOrion Constellation Chart
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →