CSS Tooltip

A CSS Tooltip is a small pop-up box that appears when a user hovers over an element. It provides additional information or context without cluttering the page layout. Tooltips are simple to implement using pure CSS, making them a lightweight and user-friendly feature for enhancing interactivity on your website.

In this tutorial, we’ll explain how to create and style tooltips using CSS, along with some practical examples.

What Is a Tooltip?

A tooltip is typically displayed:

  • When a user hovers over an element (e.g., a button, link, or image).
  • To show short explanatory text, such as hints, labels, or additional information.

Basic Tooltip Structure

Tooltips are built with the following:

  1. An HTML element (e.g., a button or text).
  2. A tooltip container styled with CSS.
  3. A hover effect that displays the tooltip.

Basic HTML Structure

<div class="tooltip">
    Hover over me
    <span class="tooltiptext">This is a tooltip</span>
</div>
  • tooltip: The main element that contains the tooltip text.
  • tooltiptext: The hidden text that appears on hover.

Styling a Basic Tooltip

Example CSS

/* Tooltip Container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip Text */
.tooltip .tooltiptext {
    visibility: hidden; /* Hidden by default */
    width: 120px; /* Tooltip width */
    background-color: #555; /* Tooltip background */
    color: #fff; /* Text color */
    text-align: center;
    border-radius: 5px; /* Rounded corners */
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; /* Transparent by default */
    transition: opacity 0.3s; /* Smooth fade-in effect */
}

/* Show Tooltip on Hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Output

When you hover over the element, the tooltip text fades in smoothly above it.

Tooltip with Arrow

To make the tooltip more visually appealing, you can add an arrow pointing to the element.

Example CSS with Arrow

/* Tooltip Text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip Arrow */
.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%; /* Position arrow below the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show Tooltip on Hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Output

The tooltip now includes an arrow pointing to the element, making it more intuitive for users.

Tooltip on Different Sides

You can position the tooltip on any side (top, bottom, left, or right) by adjusting the position and ::after styles.

Tooltip on the Right

.tooltip .tooltiptext {
    bottom: 50%;
    left: 125%;
    transform: translateY(50%);
}

.tooltip .tooltiptext::after {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-color: transparent #333 transparent transparent;
}

Tooltip on the Left

.tooltip .tooltiptext {
    bottom: 50%;
    left: -125%;
    transform: translateY(50%);
}

.tooltip .tooltiptext::after {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-color: transparent transparent transparent #333;
}

Advanced Tooltip with Animations

You can add animations to make the tooltip slide in or fade in smoothly.

Example: Sliding Tooltip

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(-10px); /* Start slightly above */
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Slide into position */
}

Example: Scaling Tooltip

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8); /* Start smaller */
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: scale(1); /* Grow to full size */
}

Accessible Tooltips

While CSS tooltips are visually appealing, they must also be accessible:

  1. Ensure tooltips are readable by screen readers using aria-label or aria-describedby.
  2. Add a focus state for keyboard accessibility.

Example: Focusable Tooltip

.tooltip:focus .tooltiptext {
    visibility: visible;
    opacity: 1;
}

HTML with aria-describedby

<div class="tooltip" tabindex="0" aria-describedby="tooltip-text">
    Focus me
    <span id="tooltip-text" class="tooltiptext">Accessible Tooltip</span>
</div>

Practical Use Cases for Tooltips

  • Form field hints (e.g., password strength requirements).
  • Button explanations (e.g., “Save your progress”).
  • Interactive charts or maps (e.g., showing additional data).
  • Navigation elements (e.g., label icons with tooltips).

Best Practices

  1. Keep It Simple: Use concise and clear text in tooltips.
  2. Ensure Visibility: Position the tooltip so it doesn’t overlap important content.
  3. Accessibility: Make tooltips usable for keyboard navigation and screen readers.
  4. Responsive Design: Ensure tooltips are mobile-friendly by using touch-friendly designs.

Conclusion

CSS Tooltips are a great way to provide additional information or context to users without overwhelming the UI. They’re easy to implement and customizable to fit your design needs.

For more CSS tutorials and web development tips, visit The Coding College.

Leave a Comment