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:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example of pure CSS no JavaScript tooltip with hint.css</title> 
<meta name="description" content="Example of pure CSS not JavaScript tooltip with hint.css. 9 different types of tooltips are demonstrated on this page."> 
<link href="bootstrap-2.0.3.css" rel="stylesheet">
<link rel="stylesheet" href="hint.css"></link> 
<style type="text/css">
body{margin-top: 50px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<!-- tooltips code goes here -->
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Example of pure CSS no JavaScript tooltip with hint.css</title>

body{margin-top: 50px}

</style>

</head>

<body>

</div>

</body>

</html>

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:

<p>Hi, this is an example of creating <span class="hint  hint--top" data-hint="Hi, this is top tooltip">top tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--bottom" data-hint="Hi, this is bottom tooltip">bottom tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--right" data-hint="Hi, this is right tooltip">right tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--left" data-hint="Hi, this is left tooltip">left tooltip</span>.</p>

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:

<p>Hi, this is an example of creating <span class="hint  hint--error" data-hint="Hi, this is error tooltip">errors tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--info" data-hint="Hi, this is info tooltip">info tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--warning" data-hint="Hi, this is warning tooltip">warning tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--success" data-hint="Hi, this is success tooltip">success tooltip</span>.</p>
<p>Hi, this is an example of creating <span class="hint  hint--always" data-hint="Hi, this is always tooltip">always tooltip</span>.</p>