Simple CSS3 Tooltips Tutorial

July 4, 2013 | Written by Rawaf W | in Web Design | 2 comments
css3

Today, I like share with you some simple codes (html – css3) in this tutorial that help you for create Tooltips in your website without images and javascripts, Tooltips are a great way to show your user more information by simply hovering over an image or text.

They can be used, for example, to provide captions for images, or longer descriptions for links, or any useful information which would improve the user experience of your site, without intruding on the design.

You can see Tooltips used in my new blog design (Top slidebar, Download buttons), it’s as like demo for my this tutorial so you can check them and continue her for create one for your website.

Let’s start off by creating some simple HTML code. you need to add simple text, then select the tooltips content in (span) and assign it a class (in my example is tpcoder) check code below:

<a href="#" class="tpcoder">
  your text
  <span>Your custom description</span>
</a>

The next step is create some CSS styling for our tooltip class:

.tpcoder
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tpcoder span
{
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 150px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tpcoder:hover
{
  border: 0; /* IE6 fix */
}

.tpcoder:hover span
{
  visibility: visible;
}

.tpcoder span:before,
.tpcoder span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tpcoder span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}
How is css code made

You will see the method might be familiar to you, a relative positioned element who wraps an absolute positioned one. With this tutorial I’m not trying to reinvent the wheel, I’m just showing you how to create some cool CSS3 tooltips. Also you will see the proper structure, note the two pointers (made using :before and :after pseudo-elements ) so if you need more details about this elements and how are you create it ? please check the following ingredients that were used to create them:

Browser Support

This is a cross-browser solution, it works with all browsers and also on browsers like IE6 and IE7.

There are final my tutorial, I wish you like and useful with it, now , How do you build tooltips? Have you used this technique on a site? Have you some problems? Let us know in the comments.

Tags: , , , , , , ,
Share the Post
About the Author:

Rawaf W is the editor and founder of Nightocoder Blog. You can follow nightocoder on Twitter, on Facebook, on Pinterest or you can subscribe via RSS.

Visit Website

2 Responses to "Simple CSS3 Tooltips Tutorial"

  1. shady says:

    It’s simple and clean … I like it

Leave a Reply

*required

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>