How to create simple tooltip in css

By | October 15, 2016

How to create simple tooltip in css

In this tutorial I’ll tell you how to create simple tooltip in css. Tooltips are great help for your users to know details of options you offered in your website on hover at question mark or help text. Can be used to explain longer descriptions or details of any link, input box or anything else you want to give extra information. Tooltip improve user experience of your site.

How to create a simple tooltip in CSS3

How to create a simple tooltip in CSS

How to create a simple tooltip in CSS3How to create a simple tooltip in CSS3

Let’s write some markup

Everything in <p> tag will be displayed as tooltip information  and .tooltip div show question mark in a circle on hover it shows information inside <p>. You can put anything inside the tooltip information like HTML, images…

Your information paragraph hidden by default but it will be visible on hover.

I have added 2 classes .tooltip show question mark and .tooltip-h show help text. CSS animation added to show tooltip for nice effects with keyframes and -webkit-keyframes added for chrome support.

I hope it helps you guyz to improve your user interface and make it well documented.

Do share it and let your friend’s know about it.