Example – Create Simple CSS Tooltip

171

A tooltip provides extra information when user hover on the element. Tooltips are a great way to showing details information to the user by hovering a text or image and it helps to improve the user experience of your website. Using tooltips you can display image caption, description for links, and useful information. You can easily create a tooltip with CSS without using JavaScript or jQuery.

In this tutorial, we will show you how to create tooltip on hover text or image using pure CSS. Here we’ll provide a short code snippet to create simple CSS tooltip that appears when the user moves the mouse pointer over a text. Also, you’ll be able to place the tooltip to the different position (Top, Bottom, Left, and Right) of hoverable text.

HTML Code

Add tooltip class to text with tooltip position class (top or bottom or left or right) on which tooltip would appear and assign tiptext class on tooltip content.

CSS Code

The following CSS would be same for all tooltips position.

Along with the above CSS use any one of the below CSS.
Top Tooltip CSS:

Bottom Tooltip CSS:

Left Tooltip CSS:

Right Tooltip CSS:

 

Leave A Reply

Your email address will not be published.