How To Show, Position, And Style A Tooltip In HTML And CSS?

A tooltip is referred to as an element that provides additional information regarding an HTML element. This extra piece of information is displayed every time the user brings the mouse cursor over that particular element. These tooltips play an important part in upgrading a web design because using them will prevent you from displaying any extra information on the web page that might not look good otherwise. In this article, we will enlighten on how to show, position, and style a tooltip in HTML and CSS.

Before we dive into other details about a tooltip, let’s first learn how to create a primary tooltip.

How to create/show a tooltip

The example below demonstrates how to create a basic tooltip.

HTML

<div class="tooltip">Bring mouse over me <span class="tooltiptext"> Tooltip text</span></div>

In the above code, we have created a div element and placed some content inside it and using a span element we are adding a tooltip text inside the div element. Note that the div has been assigned the class tooltip, meanwhile, the span element has been given the class tooltiptext.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }

Here we are giving the div element a relative position to position the tooltip text and displaying it as an inline-block element so that the tooltip is placed right next to the div element. Furthermore, with respect to that div, we are adjusting the position of the tooltip as absolute. Moreover, the visibility of the tooltip is hidden but when the mouse cursor is brought over the div element the tooltip will be visible.

Output

A tooltip has been created successfully.

Now that we know how to make a tooltip, let’s explore how to position the tooltip.

How to position a tooltip

There are four types of positions that you can assign to a tooltip and these are mentioned below.

1. Top
2. Bottom
3. Left
4. Right

All of these positions are demonstrated below with the help of examples.

How to position a tooltip at top

For the purpose of positioning a tooltip at the top we are going to use the example used above.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px; /* To set the top position of the tooltip */ position: absolute; z-index: 1; bottom: 100%; left: 60%; margin-left: -65px; } .tooltip:hover .tooltiptext { visibility: visible; }

For the purpose of positioning the tooltip we are using the absolute value of the position property so that it can be placed with respect to the div element. Moreover, for placing it in front of the element we are giving it a stack order of 1 using z-index property. Furthermore, to place it exactly above the element we have set the bottom, left, and margin-left properties.

Output

The tooltip has been given the top position.

How to position a tooltip at the bottom

In order to position a tooltip at the bottom consider the example below.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px;/* To set the bottom position of the tooltip */ position: absolute; z-index: 1; top: 100%; left: 60%; margin-left: -65px; } .tooltip:hover .tooltiptext { visibility: visible; }

The absolute value of the position property positions the tooltip with respect to the div element. Moreover, stack order of the tooltip is set to 1 to place it in front of the div container. Furthermore, to place it exactly below the element we have set the top, left, and margin-left properties.

Output

The tooltip has been positioned at the bottom.

How to position a tooltip to left

If you desire to position your tooltip to the left of an element then consult the example below.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px; /* To set the left position of the tooltip */ position: absolute; z-index: 1; top: -6px; right: 102%; } .tooltip:hover .tooltiptext { visibility: visible; }

Apart from position, and z-index properties we are using the top, and right properties as well to position the tooltip exactly to the left of the specified element.

Output

Successfully positioned the tooltip to the left.

How to position a tooltip to right

Here we have demonstrated how you can position a tooltip to the right of an element.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px;/* To set the right position of the tooltip */ position: absolute; z-index: 1; top: -6px; left: 102%; } .tooltip:hover .tooltiptext { visibility: visible; }

Here we are using the top and left properties to set the position of the tooltip to the right of an element.

Output

The tooltip has been adjusted to the right.

How to style a tooltip

In the above examples we have styled the tooltip using some basic CSS properties such as background-color, color, text-align, border-radius, and padding. However, there are other ways to style a tooltip as well. Here we have shown you some of them.

Adding an arrow to the tooltip

For the purpose of adding an arrow, like a bubble speech, consider the example below.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute;/* To position the tooltip */ top: 100%; left: 50%; margin-left: -6px; /* To add an arrow */ border: 6px solid; border-color: rosybrown transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; }

Here we are using the :after pseudo-element to display the arrow from a particular side of the tooltip, therefore, the content after the tooltip is left empty. However, to create the arrow, the border property is used. To keep the arrow in the center of the tooltip the border-width and margin-left properties should be given the same yet opposite in sign values.

We are using the border-color property to give color to each border of the arrow. Only the top border is given the color rosybrown and the rest are set to transparent. If these all were given some color then the arrow would appear as a square.

Lastly, the tooltip and the arrow has been placed above the element. If you wish to position the tooltip along with an arrow to any other position then consult the examples given above.

Output

Successfully added an arrow to the tooltip.

How to add a fade-in effect to the tooltip

In order to give a certain effect, for instance, a fade-in effect to the tooltip, consider the example below.

CSS

.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; background-color: rosybrown; color: white; border-radius: 7px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;/* To add a fade-in effect to the tooltip */ opacity: 0; transition: opacity 2s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

In the above code, in order to make the tooltip fade in when the mouse hovers over the element, the transition property is used along with the opacity property. The duration of the transition has been set to 2 seconds which means that it will take 2 seconds for the tooltip to go from being invisible to completely visible.

Output

The fade-in effect is working properly.

Conclusion

A tooltip is referred to as an element that provides extra information about an element every time a mouse cursor is brought over that element. To add a tooltip on an element, the position property is utilized based on the location where you want to show the tooltip. Besides this, you can add an arrow, or a fade-in effect to the tooltip to give it some style. In this write-up, we have enlightened on how to show, position, and style a tooltip using HTML and CSS.