For showing some message or help content to the user generally we need some hidden message through some link where user will to see or click to get help.For that we nee to nice look and feel.From that one of is tooltip which will be easy for user and as well as for server.Means no need to go for other link or any other page or location or any pop up we just hover the crosser and get our information or help by “what is this ? “.So tolltip can be done by jss or also css But I am going to show you how will show you the tooltip through css which I say “Simple tooltip by css”.Also I guess it very easy no need to add any plugin nor any js file just add the class and use the class for your tooltip.its very simple.So it is called as Simple tooltip by css.Nice look with easy setup no need to add any plugin nor any js file just add the class and use the class for your tooltip.

Simple tooltip by css
Simple tooltip by css

Here is my fool html file from where you can just copy this html file and save in your system as cssToolTip.html file and see the result and feel how easy it(Simple tooltip by css).

Live Demo


If you have simple knowledge of css then you can easily understand how Simple tooltip work.

Click To Run

The above part is my html div part and below part is my css part. I have put here as inline you can use all the css as separate file and link to that file for your example.

Here you can see no extra links nor any plugin are added as I called it is so simple.So use it if you think you can get benefit for website.

So please don’t forget to share if got benefit.
Simple tooltip by css
Tagged on:         

Leave a Reply

Your email address will not be published. Required fields are marked *