How to define tooltip text in CSS?

Mastering Tooltip Text in CSS: A Comprehensive Guide

Learn how to define and style dynamic tooltip text using pure CSS, enhancing user experience without JavaScript.

Tooltips are small, contextual pop-up boxes that appear when a user hovers over or focuses on an element. They are invaluable for providing additional information, hints, or descriptions without cluttering the main interface. While JavaScript is often used for complex tooltip behaviors, CSS alone can achieve elegant and functional tooltips. This article will guide you through the process of creating such tooltips, focusing on semantic HTML and accessible CSS techniques.

The Basic Structure: HTML for Tooltips

The foundation of a CSS-only tooltip lies in well-structured HTML. We typically use a data-* attribute to store the tooltip text directly on the element that triggers it, or we can use a nested <span> or <div> element for more complex content. The data-* attribute approach is often cleaner for simple text.

<button class="tooltip-trigger" data-tooltip="This is a helpful tip!">Hover for Info</button>

<a href="#" class="tooltip-trigger">
  Link with Tooltip
  <span class="tooltip-content">Clicking this link will take you to an external resource.</span>
</a>

HTML structure for elements with tooltip triggers using data-tooltip and a nested <span>.

Styling the Tooltip: CSS Essentials

Once the HTML is in place, CSS is used to hide the tooltip by default and reveal it on hover. We'll leverage pseudo-elements (::before and ::after) for the tooltip box and its arrow, or style the nested tooltip-content directly. The key is to position the tooltip absolutely relative to its trigger.

.tooltip-trigger {
  position: relative; /* Needed for absolute positioning of tooltip */
  display: inline-block;
  cursor: pointer;
}

/* For data-tooltip attribute */
.tooltip-trigger[data-tooltip]::before,
.tooltip-trigger[data-tooltip]::after {
  --tooltip-text: attr(data-tooltip);
  content: var(--tooltip-text);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip-trigger[data-tooltip]::before {
  bottom: 125%; /* Position above the element */
}

.tooltip-trigger[data-tooltip]:hover::before,
.tooltip-trigger[data-tooltip]:focus::before {
  visibility: visible;
  opacity: 1;
}

/* For nested span */
.tooltip-trigger .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 125%; /* Position below the element */
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus .tooltip-content {
  visibility: visible;
  opacity: 1;
}

Basic CSS to hide tooltips by default and show them on hover/focus, using both data-tooltip and nested <span> approaches.

Visualizing tooltip positioning with CSS pseudo-elements.

Adding a Tooltip Arrow

A small arrow can visually connect the tooltip to its triggering element, improving user comprehension. This is typically achieved using another pseudo-element (::after) and CSS border properties to create a triangle shape.

.tooltip-trigger[data-tooltip]::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent; /* Arrow pointing up */
  bottom: 115%; /* Position just below the tooltip box */
  visibility: hidden;
  opacity: 0;
  z-index: 11;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip-trigger[data-tooltip]:hover::after,
.tooltip-trigger[data-tooltip]:focus::after {
  visibility: visible;
  opacity: 1;
}

CSS for creating a simple arrow for the tooltip, pointing towards the trigger element.

Advanced Positioning and Customization

Beyond basic top/bottom positioning, you might need tooltips to appear to the left or right, or dynamically adjust based on screen edge. This can be achieved by modifying left/right and transform properties, or by introducing additional classes.

Tab 1

type: tabs

Tab 2

items: [

Tab 3

{

Tab 4

language: 'css',

Tab 5

title: 'Left/Right Positioning',

Tab 6

content: ".tooltip-trigger[data-tooltip].tooltip-left::before { left: auto; right: 125%; transform: translateY(-50%); top: 50%; } .tooltip-trigger[data-tooltip].tooltip-right::before { left: 125%; right: auto; transform: translateY(-50%); top: 50%; }"

Tab 7

},

Tab 8

{

Tab 9

language: 'html',

Tab 10

title: 'HTML Usage',

Tab 11

content: "<button class="tooltip-trigger tooltip-left" data-tooltip="On the left!">Left Tooltip"

Tab 12

}

Tab 13

]

1. Step 1

Define your tooltip content using data-tooltip attributes or nested <span> elements within your HTML.

2. Step 2

Apply position: relative; to the tooltip trigger element to establish a positioning context.

3. Step 3

Use CSS pseudo-elements (::before for content, ::after for arrow) or style the nested <span> with position: absolute; to create the tooltip box.

4. Step 4

Initially hide the tooltip using visibility: hidden; and opacity: 0;.

5. Step 5

Add transition properties for a smooth fade-in/fade-out effect.

6. Step 6

On :hover and :focus states of the trigger, change visibility to visible; and opacity to 1; to display the tooltip.