Creating Tooltips with Only HTML and CSS

What is a Tooltip?

A tooltip is a feature that displays a small supplemental explanation when the mouse cursor hovers over an element.

👆 For example, this screenshot shows a tooltip in Google Sheets.

When to Use It

You can expect an improvement in user experience by using tooltips to supplement abstract expressions, such as buttons or tabs that use icons. It is also one way to present the formal name or an alias for technical terms (abbreviations) through a tooltip.

Implementing Tooltips with HTML and CSS

Tooltips can be realized using only HTML and CSS, without the need for JavaScript.

Strategy

The task is simple. We keep the tooltip hidden using CSS and only cancel the hidden state when the parent element is hovered over.

CSS

First, we write the CSS to implement the tooltip. The two classes involved are:

1. .tooltip: The element you want to add a tooltip to when the cursor is hovered.
2. .tooltip-text: The content of the tooltip.

/* Element to hover over */
.tooltip {
  position: relative; /* Basis for tooltip positioning */
  cursor: pointer; /* Changes cursor to a pointer when hovered */
}

/* Tooltip text */
.tooltip-text {
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
  position: absolute; /* Absolute positioning */
  left: 50%; /* Center relative to parent */
  transform: translateX(-50%); /* Center relative to parent */
  bottom: -30px; /* Position from the bottom of the parent element */
  display: inline-block;
  padding: 5px; /* Spacing */
  white-space: nowrap; /* Prevent text wrapping */
  font-size: 0.8rem; /* Font size */
  line-height: 1.3; /* Line spacing */
  background: #333; /* Background color */
  color: #fff; /* Text color */
  border-radius: 3px; /* Rounded corners */
  transition: 0.3s ease-in; /* Animation */
}

/* Remove hidden state when hovered */
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}

If you use this throughout your entire site, it might be a good idea to include this CSS in your global CSS or create a component.

(Zenn also implements tooltips using this method, but we have created React components like <TooltipContainer /> and <TooltipText /> to make them easily reusable.)

HTML

After adding the CSS, write HTML like the following where you want to use the tooltip.

<button class="tooltip">
	<span class="tooltip-text">Tooltip content</span>
	Button text
</button>

• For the element that holds the tooltip (tooltip), we are using a button tag, but a span tag or an a tag is also fine.
• For the tooltip content to be displayed (tooltip-text), use a span tag.

Usage Example

The actual usage image looks like the following. Tooltips will appear when you hover the cursor over the text or buttons.

Making It Speech Bubble Shaped

Additionally, if you add the following to your CSS, the tooltip will take the shape of a speech bubble (a triangle is added using a pseudo-element).

.tooltip-text:before {
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-bottom: 7px solid #333;
}

That's it for the simple way to create tooltips.