Tooltips are a great way to provide additional information to users without cluttering your website's interface. With modern CSS, you can create clean and interactive tooltips without relying on JavaScript. This guide will walk you through creating simple CSS-only tooltips.

Why Use CSS-Only Tooltips?

CSS-only tooltips are lightweight, easy to implement, and require no JavaScript. They work well for static tooltips and provide a quick user experience enhancement with minimal overhead.

HTML Structure

The first step is to add the basic structure for the tooltip. We'll use the data-* attribute to store the tooltip text.

<div class="tooltip-container">
  Hover over me!
  <span class="tooltip-text">This is a CSS-only tooltip</span>
</div>

  • .tooltip-container: The element that will trigger the tooltip.

  • .tooltip-text: The actual tooltip content, which will be hidden by default.

CSS for Tooltips

Here’s the CSS to style the tooltip and make it appear on hover:

/* Tooltip container */
.tooltip-container {
  position: relative; /* Ensures the tooltip is positioned relative to this container */
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text */
.tooltip-text {
  visibility: hidden; /* Hidden by default */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  bottom: 125%; /* Position above the container */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Tooltip arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow points downward */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

How It Works

  1. Hidden by Default: The tooltip text is hidden using visibility: hidden and opacity: 0.

  2. Positioning:

    • The position: absolute property places the tooltip relative to its container.

    • The bottom: 125% positions the tooltip above the trigger.

    • left: 50% and transform: translateX(-50%) center the tooltip horizontally.

  3. Tooltip Arrow: The ::after pseudo-element creates a small arrow using CSS borders.

  4. Hover State: The :hover pseudo-class on .tooltip-container reveals the tooltip by changing visibility and opacity.

Variations

1. Tooltip Below the Trigger

Change the positioning to place the tooltip below the trigger:

.tooltip-text {
  bottom: auto;
  top: 125%; /* Position below */
}
.tooltip-text::after {
  top: auto;
  bottom: 100%; /* Arrow points upward */
  border-color: transparent transparent #333 transparent;
}

2. Fade-In Animation

For a smoother reveal, you can add a transform animation:

.tooltip-text {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(-50%) translateY(10px);
}

.tooltip-container:hover .tooltip-text {
  transform: translateX(-50%) translateY(0);
}

Example

Here’s a full example with tooltips placed above and styled:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-Only Tooltips</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 50px;
      text-align: center;
    }

    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 20px;
      cursor: pointer;
      color: #007bff;
    }

    .tooltip-text {
      visibility: hidden;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 5px;
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1000;
    }

    .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    .tooltip-container:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <h1>CSS-Only Tooltips Demo</h1>
  <div class="tooltip-container">
    Hover over me!
    <span class="tooltip-text">This is a CSS-only tooltip</span>
  </div>
</body>
</html>

Browser Compatibility

CSS tooltips work across all modern browsers, including Chrome, Firefox, Safari, and Edge. Older versions of Internet Explorer (before IE 11) may have limited support for visibility and opacity transitions.

Adding CSS-only tooltips to your website is a simple and effective way to enhance user experience. By leveraging the power of CSS, you can create clean, interactive tooltips without any JavaScript. Try these tips in your next project!