← Back to Chapters

CSS Tooltip

? CSS Tooltip

Build clean, responsive tooltips that appear on hover and look great in both light and dark themes.

? Quick Overview

  • Tooltip = small box with helper text attached to another element.
  • Commonly used for explaining icons, abbreviations, or short hints.
  • Here we build top and bottom tooltips that appear on hover, with automatic color adjustment in dark mode.

? Key Concepts

  • position: relative on the tooltip wrapper (parent).
  • position: absolute on the tooltip bubble (child).
  • Use top / bottom + left: 50% + transform: translateX(-50%) to center horizontally.
  • Use opacity and visibility to show the tooltip only on :hover.

? Basic Structure (HTML)

The tooltip text is simply a nested element inside the main label.

? View Basic Tooltip Markup 
<!-- Tooltip with top and bottom examples -->
<div class="tooltip-demo">
  <div class="tooltip tooltip-top">
    Hover Me (Top)
    <span class="tooltip-text">This is a top tooltip</span>
  </div>

  <div class="tooltip tooltip-bottom">
    Hover Me (Bottom)
    <span class="tooltip-text">This is a bottom tooltip</span>
  </div>
</div>

? Styling the Tooltip (CSS)

We position the bubble absolutely inside its parent and then move it above or below the element. The tooltip becomes visible when you hover over the parent.

? View Tooltip CSS 
/* Tooltip layout: wrapper and bubbles */
.tooltip-demo {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.tooltip {
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  cursor: default;
  font-weight: 500;
  text-align: center;
}
.tooltip-text {
  position: absolute;
  min-width: 160px;
  background-color: var(--bg-code);
  color: var(--text-on-dark);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tooltip-top .tooltip-text {
  bottom: 130%;
  left: 50%;
  transform: translate(-50%, 4px);
}
.tooltip-bottom .tooltip-text {
  top: 130%;
  left: 50%;
  transform: translate(-50%, -4px);
}
.tooltip-text::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
}
.tooltip-top .tooltip-text::after {
  top: 100%;
  border-color: var(--bg-code) transparent transparent transparent;
}
.tooltip-bottom .tooltip-text::after {
  bottom: 100%;
  border-color: transparent transparent var(--bg-code) transparent;
}
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

? Live Output – Top & Bottom Tooltips

✅ Hover Tooltip Demo

Move your mouse over each pill to reveal the tooltip. In dark mode, the bubble becomes light and the text turns dark for better contrast.

Hover Me (Top) This is a Top Tooltip
Hover Me (Bottom) This is a Bottom Tooltip

? Explanation

  • The .tooltip wrapper is relative, so its child .tooltip-text can be positioned using top/bottom.
  • For a top tooltip, we use bottom: 130% to push it above the element.
  • For a bottom tooltip, we use top: 130% to place it below.
  • left: 50% and transform: translateX(-50%) keep the bubble horizontally centered above/below the trigger.
  • opacity and visibility are animated so the tooltip fades in smoothly when you hover over the element.

? Tips & Best Practices

  • Use concise text in tooltips; they are meant for short hints, not long paragraphs.
  • Keep contrast high. In dark mode this example switches to a light bubble with dark text automatically.
  • For interactive web apps, also show tooltips on :focus for keyboard users using :focus-within on the wrapper.
  • When preparing print-ready handouts, you can temporarily remove the hover styles and keep opacity: 1 so tooltips are always visible in PDFs.

? Try It Yourself

  1. Create a new tooltip that appears on the left of the element.
  2. Create another tooltip that appears on the right of the element.
  3. Change the background and text color of the tooltip to match your own website theme.
  4. Add a small icon (like ℹ️) inside the tooltip bubble for extra visual meaning.
? Starter Code for Left / Right Tooltip 
/* Practice: add left and right tooltips */
.tooltip-left .tooltip-text {
  right: 130%;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-right .tooltip-text {
  left: 130%;
  top: 50%;
  transform: translateY(-50%);
}