Create a Simple Yet Stylish Tooltip Using CSS



Tooltips are a great way to show extra information when hovering 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 the meaning of a word. It can have different styles and positions, and it 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 the 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.

<span class=”tooltip”>Top

<span>I never lose. Either I win or I learn. </span>

</span>

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 for 4 sides (top, left, right and bottom). The tooltipCSS class will style the parent span element text. It creates a bottom positioned dotted border on text and sets its position to relative which helps in positioning the tooltip text at an 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 sets 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 set 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 we want the tooltip to be visible on a hover event, use the CSS :hover selector. The :hover selector selects elements when the user mouses 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 is,

.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 a 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 by altering the appropriate CSS properties. 

Leave a reply
this will never be published
@