CSS Tooltips

Introduction

In continuation of our CSS journey, where we explored 2D and 3D Transforms, Transitions, and Animations, this blog dives into more essential features that enhance modern web designs. Now, we’ll cover CSS Tooltips, the versatile object-fit and object-position properties, CSS Masking, Pagination, Multiple Columns, and the powerful CSS Variables. These topics will help you create more interactive, flexible, and maintainable layouts while optimizing the visual presentation of your web pages.

CSS Tooltips can be enhanced with different positions, arrows, and even fade-in effects. These customizations make tooltips more interactive and visually engaging.

Positioning Tooltips (Top, Right, Bottom, Left)

You can position tooltips around an element in four different directions: top, right, bottom, and left. This is controlled using absolute positioning.

Example: Tooltip on Top

<div class="tooltip">Hover me! <span class="tooltip-text top">Tooltip text on top</span> </div>

CSS:

.tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltip-text { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; } .tooltip:hover .tooltip-text { visibility: visible; } .tooltip .top { bottom: 125%; left: 50%; transform: translateX(-50%); }

This example shows how to position a tooltip above the element, using absolute positioning with bottom and left to control its placement. Similarly, you can change the top, right, bottom, and left properties to position tooltips in any direction:

Right: top: 50%; left: 12
5%;
Bottom: top: 125%; left: 50%;
Left: top: 50%; right: 125%;

Tooltip Arrows

Adding an arrow to your tooltip enhances its visual clarity and makes it look more professional.

Example with Tooltip Arrow:

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

This code creates a triangle arrow using CSS borders. By changing the border-color and positioning of the ::after pseudo-element, you can position the arrow for different tooltip directions:

Right: border-color: transparent transparent transparent black;
Bottom: border-color: transparent transparent black transparent;
Left: border-color: transparent black transparent transparent;

Fade-in Tooltips (Animation)

Adding a fade-in animation to tooltips can make them appear smoothly, enhancing the user experience.

Example with Fade-in Effect:

.tooltip .tooltip-text { opacity: 0; transition: opacity 0.5s ease; } .tooltip:hover .tooltip-text { opacity: 1; }

In this example, the tooltip starts with opacity: 0 and fades in when the user hovers over the element. The transition property is used to control the duration and easing of the animation. You can adjust the 0.5s to make the animation faster or slower.

Tooltip Example with All Features (Positioning, Arrow, Fade-in)

A full example that includes positioning the tooltip on the top, an arrow, and a fade-in effect:

<div class="tooltip">Hover me! <span class="tooltip-text top">Tooltip text with arrow and fade-in</span> </div> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltip-text { visibility: hidden; width: 150px; background-color: black; color: #fff; text-align: center; padding: 5px; border-radius: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .tooltip .tooltip-text::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } </style>

This example combines the positioning, arrow, and fade-in effect for a polished, professional tooltip.

Request more information

CSS Tooltips