Simple Tooltip using CSS

We can can create tooltip using HTML and CSS only. Normally for this before we used Javascript or jQuery to create tooltip for any div elements on HTML. I this article I am going to show you how to create tooltip for any element in HTML only using CSS.

Tooltip is useful feature we can show a message on ant HTML element like a text,  link or a button when mouse over. By default the message is hidden and when mouse over the element that tooltip message will show. Let us see how to create tooltip message using HTML and CSS.

Creating tooltip using CSS

We are using ‘data-tooltip’ attribute to the element. Example following code:
<a href="#" data-tooltip="I am a tooltip">I am a link</a>

I am also create a example code with demo on codepen, you can check its HTML, CSS and demo too:

See the Pen Tooltip using CSS3 by Vinu Narayanan (@vinuknarayanan) on CodePen.

Also we can change the direction of tooltip showing, by default it shows top of the element. To change the direction we can use pseudo elements and class name.

Please give me suggestions or ask me any doubts on this.

About the author

Vinu Narayanan

I am a freelance web developer, travel addict and work-in-progress human being based in Kerala, India. I have 5 years of experience in Wordpress and I love to work in this CMS.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2016. Created by Vinu Narayanan with Love.

Get Email Updates!

We send out our lovely email newsletter weekly with useful tips and techniques, and recent articles. Get Connected!
Email address