Create pure CSS no JavaScript tooltips with hint.css | w3resource

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:

Hi, this is an example of creating top tooltip.

Hi, this is an example of creating bottom tooltip.

Hi, this is an example of creating right tooltip.

Hi, this is an example of creating left tooltip.

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

Hi, this is an example of creating errors tooltip.

Hi, this is an example of creating info tooltip.

Hi, this is an example of creating warning tooltip.

Hi, this is an example of creating success tooltip.

Hi, this is an example of creating always tooltip.

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)