CSS Tooltip

CSS Tooltips are a great way to display extra information about something when the user moves the mouse cursor over an element.

CSS Tooltip: Fundamentals

  • Using CSS, you can generate tooltips
  • To add text to a CSS tooltip, we need HTML
  • HTML tooltip creation part focuses on describing an containing text
  • CSS tooltip creation part focuses on determining the style of tooltip box, position, color, display, etc.
  • Tooltips are meant for specifying additional information about a topic of your choice when the user hovers the mouse pointer on a specified element.

Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example -

CSS tooltip master class: create an HTML tooltip from scratch and style it

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.

CSS Tooltip From Scratch

Example -

Positioning Tooltips

Today, we’ll learn how to create a simple tooltip using CSS and then how to position them in top, left, right and bottom.

Right Tooltip

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.

Example -

Left Tooltip

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:

Example -

Top & Bottom Tooltip

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.

Example -

Here is an example of a bottom CSS tooltip:

Example -

Tooltip Arrows

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:

Bottom Arrow

Example -

Creating an Arrow Using CSS Borders

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.

Top Arrow

Example -

Left Arrow

The below example will demonstrate how you can add an arrow to the left of the tooltip:

Example -

Right Arrow

The below example will demonstrate how you can add an arrow to the right of the tooltip:

Example -

Fade In Tooltips (Animation)

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:

Example -

CSS Tooltip: Conclusion

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:

  • Tooltips are text boxes which appear once you hover over an element;
  • You need to create the hidden tooltip text box with HTML in the form of an inline element;
  • You can style the tooltip using CSS;
  • CSS makes the tooltip appear using display property;
  • position and topbottomleft, right properties are the key ones when managing the placement of the tooltip;
  • Using CSS borders, we can create tooltip arrows;
  • transition and opacity properties let us create a fade in effect.