Home » CSS3 » Create pure CSS no JavaScript tooltips with hint.css

Create pure CSS no JavaScript tooltips with hint.css

Posted on February 6th, 2013

This tutorial shows how to create tooltips with CSS only, without using any JavaScript code. You can achieve this with hint.css.

Live Demo

You may download the hint.css or the minified version of it from here and here.

To create the tooltips shown above, we start with an HTML page adding hint.css in the head section of the page. We have used bootstarp.css as the base CSS for the page and added an extra style to create some margin at the top of the content. Here is the code:

To create a tooltip, you need to add hint and any of the hint--top, hint--bottom, hint--right, hint--left CSS classes depending upon in which direction of the text in question shall hold the tooltip.

To display some text within the tooltip, you need to add that text a a value of the data-hint attribute.

So, to create tooltips at top, bottom, right and left, following codes are added:

hint.css also offers tooltips of different colors. Following code shows how to do that:

You may download the entire code here.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)