How to create a tooltip in CSS

A tooltip is a GUI element that is used in the user interfaces of our applications. Its primary purpose is to enhance interactivity and user experience by providing additional information through pop-up messages. These tooltips appear when users hover their mouse cursor over specific elements, such as buttons, links, or icons.

In this Answer, we will learn how we can create a tooltip in CSS.

CSS properties for tooltip effect

To create a tooltip in CSS, we define a tooltip container div and add our tooltip element inside it. We use CSS properties to add the tooltip effect to our tooltip element in the container. These include:

• Position: We set our tooltip container's position to relative and our tooltip element's position to absolute. This allows the tooltip to be positioned relative to its parent container.

• Visibility: We set the visibility of the tooltip element to hidden so it only becomes visible when the container is hovered over.

• :hover selector: We use the hover selector on our tooltip container to make the tooltip element visible whenever the hover event is triggered.

The rest of the CSS properties are optional and depend on how we want to style our tooltip container and element.

Code example

Let's understand how to create a tooltip in CSS using the code below

Code explanation

In index.html :

• Lines 8–14: We define a container tooltip-container that holds a <p> element and a span element that acts as our tooltip element.

In styles.css :

• Lines 1–3: We center all the textual page content horizontally using the text-align property.

• Lines 5–11: We apply styling to the tooltip-container. We set its position to relative so the tooltip container acts as a reference for the tooltip element. We apply the other styling details just for the appearance of our container.

• Lines 13–22: We apply styling for the tooltip element. We set its position to absolute so it is positioned with respect to its parent container. Moreover, we set the visibility to hidden so that initially, our tooltip is invisible, and we can only see it when we hover over the parent container.

• Lines 24–27: We use the :hover selector to define that when we hover over the tooltip-container, the tooltip within it should become visible. We ensure this behavior by setting the visibility property to visible.

Positioning of the tooltip

Now we know how we can create a basic tooltip in CSS, let's discuss the positioning of the tooltip relative to its container. There are four possible positions where we can set our tooltip:

• Right

• Left

• Top

• Bottom

Right position

To position our tooltip on the right side of its container, we use the left property and set it to 100%. This makes the tooltip start exactly where the container's right edge ends, effectively placing it on the right side. If we apply padding to the container, we adjust the value of the top property to center the tooltip vertically.

Left position

To position our tooltip on the left side of its container, we use the right property and set it to 100%. This makes the tooltip start exactly where the container's left edge ends, effectively placing it on the left side. If we apply padding to the container, we adjust the value of the top property to center the tooltip vertically.

Top position

To position our tooltip on the top of its container, we use the bottom property and set it to 100%. This makes the tooltip start exactly where the container's top edge ends, effectively placing it on the top. We use the left property to center the tooltip horizontally.

Bottom position

To position our tooltip on the bottom of its container, we use the top property and set it to 100%. This makes the tooltip start exactly where the container's bottom edge ends, effectively placing it on the bottom. We use the left property to center the tooltip horizontally.

Conclusion

A tooltip in CSS is a useful and effective way to add additional information to the already existing content in our web applications. It enhances the user experience by offering more details without cluttering the interface.