CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.
Create a tooltip that appears when the user moves the mouse over an element:
Sometimes you want the text to only appear once the user requires it. For example, you might need to have a short explanation appear below a statement, ar a name of a photo to show up once a user hovers over it. There’s plenty of use cases of hidden text.
The important question isn’t how you could use it (I’m sure you have great ideas) but how do you create it. CSS tooltip is the thing you need! If you have already finished the CSS navigation bar tutorial, you probably have a solid idea of how one can create a hidden text box which appears on demand. However, in this tooltip CSS tutorial, we will create text boxes that have a fade in effect and arrows pointing to the visible text. If you haven’t read the navbar tutorial, don’t worry, every step of the way will be explained. Don’t waste any time and learn about HTML tooltip creation and CSS tooltip styling.
Today, we’ll learn how to create a simple tooltip using CSS and then how to position them in top, left, right and bottom.
In the below example, we place the tooltip to the right of hoverable text by using the left property in addition to the position:relative, to move it right. We also use top:-10px to move it up and on the same height with the original container. The length of 10px is used because the padding is 10 pixels to all sides.
By increasing the padding, it may also be required to increase the top property to ensure it staying centered vertically. You should treat it similarly for dealing with horizontal positioning.
Left CSS tooltip is created similarly to the right one. There’s only one thing you need to change. Instead of using the left property, we need right.
Take a look at the example below; over a hover, HTML tooltip element will appear on the left:
If you’d like the tooltip to appear on top or bottom, check out the below examples. Keep in mind that we’re using margin-left property that has the value of 50 pixels. This is used to center the tooltip horizontally. 50px is half the actual width of our tooltip. Together with it, we have to use either CSS top or bottom property.
Here is an example of a bottom CSS tooltip:
To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
There’s no special unique styling property for creating arrows in CSS. However, we can add them by using CSS borders.
First, we need to position the arrow. Let’s say we’re adding an arrow at the bottom of our CSS tooltip. The property top:100% places the arrow at the bottom of our tooltip, meanwhile left:50% centers the arrow (you could use right:50% instead).
Border-width is used to determine the size of the arrow. When changing its value, you should also change the margin-left value to a similar one to keep the arrow centered.
Border-color allows us to assign a color to our arrow. Since we’re creating a bottom arrow, we have to set a top border to any color we want and the rest to transparent. If you assigned colors to all four borders, you would end up with a frame instead of an arrow.
The below example will demonstrate how you can add an arrow to the left of the tooltip:
The below example will demonstrate how you can add an arrow to the right of the tooltip:
If you want to fade in the tooltip text when it is about to be visible, you can use the CSS transition property together with the opacity property, and go from being completely invisible to 100% visible, in a number of specified seconds (1 second in our example):
Without any animation, a tooltip box just suddenly appears. However, by using transition and opacity styling properties, we can make the tooltip fade in gradually.
We need to assign opacity:0 and a transition with a duration specified to our tooltip when it’s hidden. Then we need to assign opacity:1 to the tooltip when it’s hovered on. That’s it!
In the example, we create a fade in effect:
Now, you’re able to add tooltips to your designs like a pro! Before you rush off to do that, let’s overview the info:
display property;position and top, bottom, left, right properties are the key ones when managing the placement of the tooltip;transition and opacity properties let us create a fade in effect.