Create a simple yet stylish tooltip using CSS

What are Tooltips?

Tooltips are a great way to show extra information on hover on an image or text without disturbing the UI. Tooltips are used to show captions for the images and provide useful information for links or meaning of a word. It can have different styles and positions and can carry different types of content including text, HTML, images and videos. Simple tooltips are easy to create with the help of HTML and CSS. Today, we’ll learn how to create a simple tooltip using CSS and then how to position them in top, left, right and bottom.

HTML Markup

Let’s start off by creating the HTML markup for the tooltip. Define 2 span elements with a parent-child relationship. The parent span element has the text on which tooltip will be displayed. The inner or child span element has the tooltip text. This would be hidden by default.

Top
I never lose. Either I win or I learn. 

As you can see, there are 3 CSS classes used in the HTML: tooltip, tooltiptext and tooltip-top. We’ll see these in details in the next section.

CSS

There are 2 main CSS classes to create the tooltip and 4 others 4 sides (top, left, right and bottom). The tooltip CSS class will style the parent span element text. It creates a bottom positioned dotted border on text and set its position to relative which helps in positioning the tooltip text at absolute place.

.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted grey;
 color: #005050;
 }

The tooltiptext CSS class does following things.

• Hides the tooltip text.
• Styles the tooltip text and set its position to absolute.
• Creates a rounded corner around the tooltip text by using the border-radius attribute.
• Adds basic styles to it: 180px width, background color, white text color, centered text, 2px padding and opacity to 0.

.tooltip .tooltiptext {
 visibility: hidden;
 position: absolute;
 width: 180px;
 background-color: #555;
 color: #fff;
 text-align: center;
 padding: 2px;
 border-radius: 5px;
 z-index: 1;
 opacity: 0;
 transition: opacity .6s;
 }

As the tooltip is visible on hover event, use CSS :hover selector. The :hover selector select elements when you mouse over them. The CSS class sets the visibility to visible and the opacity to 1.

.tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }

These 3 CSS classes are enough to create a simple tooltip but we have no control on their positioning. To set the tooltip position (top, left, right and bottom), define a CSS class for each side.

.tooltip-top {
 bottom: 90%;
 margin-left: -60px;
 }
 .tooltip-left {
 top: -5px;
 right: 128%;
 }
 .tooltip-bottom {
 top: 100% margin-left: -60px;
 }
 .tooltip-right {
 top: -5px;
 left: 125%;
 }

You need to use the appropriate CSS based on your preference of displaying the tooltip around the text.

The complete CSS code:

.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted grey;
 color: #005050;
 }
 .tooltip .tooltiptext {
 visibility: hidden;
 position: absolute;
 width: 180px;
 background-color: #555;
 color: #fff;
 text-align: center;
 padding: 2px;
 border-radius: 5px;
 z-index: 1;
 opacity: 0;
 transition: opacity .6s;
 }
 .tooltip:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }
 .tooltip-top {
 bottom: 90%;
 margin-left: -60px;
 }
 .tooltip-left {
 top: -5px;
 right: 128%;
 }
 .tooltip-bottom {
 top: 100% margin-left: -60px;
 }
 .tooltip-right {
 top: -5px;
 left: 125%;
 }

That’s is all required to create a simple tooltip. You can check out the working demo here.

Conclusion

To sum it up, this tutorial shows how to create a simple yet stylish tooltip using HTML and CSS. The solution also defines how to set the position of the tooltip around the text. You can set the tooltip position on any side of the text. You can change the style and UI appearance of the tooltip just via altering the CSS properties.