Rich Tooltip With Title: Pure CSS Tooltip

Rich Tooltip With Title

A dark card under a Pro badge with a title, a short explanation and a footnote line. Use it when one sentence is not enough. The card has a fixed width so the text wraps cleanly.

Also known as: tooltip with title and description, html tooltip css, rich content tooltip.

Color Base size 16px Dark background Hold hover state

HTML

<span class="tip-rich-title">
  <button type="button" aria-describedby="tip-rich-title-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5l1.8 5.2 5.2 1.8-5.2 1.8-1.8 5.2-1.8-5.2L5 10.5l5.2-1.8z"/></svg>Pro</button>
  <span class="tip-rich-title-tip" id="tip-rich-title-tip" role="tooltip">
    <strong>Pro feature</strong>
    <span>Custom domains, unlimited projects and priority support.</span>
    <em>Included in Pro and Team</em>
  </span>
</span>

CSS

.tip-rich-title {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-bottom: 6em; /* room for the card in this preview */
}
.tip-rich-title button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.75em;
  border: 0;
  border-radius: 2em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #db2777));
  color: #fff;
  font: 700 0.8em/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tip-rich-title svg {
  width: 1.2em;
  height: 1.2em;
}
.tip-rich-title button:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-rich-title-tip {
  position: absolute;
  top: calc(100% + 0.8em);
  left: 50%;
  z-index: 10;
  box-sizing: border-box;
  width: 17em;
  padding: 0.85em 1em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.8);
  font: 400 0.82em/1.45 system-ui, sans-serif;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 50% 0;
  transform: translate(-50%, -0.4em) scale(0.96);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
}
.tip-rich-title-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0.7em;
  height: 0.7em;
  background: inherit;
  transform: translate(-50%, 50%) rotate(45deg);
}
.tip-rich-title-tip strong {
  display: block;
  margin-bottom: 0.2em;
  color: color-mix(in srgb, var(--c) 40%, #fff);
  font-size: 1.1em;
  font-weight: 700;
}
.tip-rich-title-tip span { display: block; }
.tip-rich-title-tip em {
  display: block;
  margin-top: 0.65em;
  padding-top: 0.6em;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.55);
  font-size: 0.9em;
  font-style: normal;
}
.tip-rich-title:hover .tip-rich-title-tip,
.tip-rich-title:focus-within .tip-rich-title-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tip-rich-title, .tip-rich-title *, .tip-rich-title::before, .tip-rich-title::after, .tip-rich-title *::before, .tip-rich-title *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --tip-color on the element or a parent. Currently previewing #3b82f6.
Base size: set --tip-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Rich Tooltip With Title

HTML

CSS

Customizing this snippet

Similar tooltips