Sexy Tooltip using CSS3 (no images)

CSS is Awesome, but “CSS3” is Awesomely Awesome.

With CSS3 we can make our pages even more beautiful without using additional images and extra markup.

In this post I have tried to make tooltips using CSS3. This is just a sample implementation for tooltip, you can have even better variants.

Here, this example is semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

The inspiration for these tooltips is from the excellent attempt from “Nicolas Gallagher” in Pure CSS speech bubbles.

Lets first head on to the demo for its actual effect.

Tooltip Demo

Tooltip using CSS3

Interested ??? Lets head on to its code

HTML Markup

The HTML used here is very simple, just add class”tooltip” and in title put tooltip text.

<a class="tooltip" title="This is first tooltip" href="#">Link</a>

CSS Code

The CSS for this effect utilizes :before and :after to show tooltip. Moreover box-shadow, gradient, border-radius properties of CSS3 are used to add some glare. Here is the code.

a.tooltip:after{
	font:12px/1.4 Arial,Georgia,sans-serif;
	content: attr(title);
	display:none;
	position:absolute;
	padding:5px 10px;
	top:0px;
	margin:1em 0 3em;
	color:#fff;
	background:#075698;
	left:-20px;
 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
 
	background:-webkit-gradient(linear, left top, left bottom, from(#075698), to(#2e88c4));
	background:-moz-linear-gradient(top, #075698, #2e88c4);
	background:-o-linear-gradient(top, #075698, #2e88c4);
	background:linear-gradient(top, #075698, #2e88c4);
 
	-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */
	box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#000')"; /* IE8 */
}
 
/* creates triangle */
a.tooltip:before{
	z-index:13;
	position:absolute;
	content:"\00a0";
	display:none;
	width:0;
	height:0;
	border-style:solid;
 
	top:-3px;
	left:0px;
	border-width:15px 7px 15px 7px;
	border-color:transparent transparent #075698;
}
 
a.tooltip:hover::before{
	display:block;
}
 
a.tooltip:hover{
	z-index:10;
	position:relative;
}
 
a.tooltip:hover::after{
	width:200px;
	display:block;
	margin:25px 0 0 10px;
}

Hope you'll like it.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

7 responses to “Sexy Tooltip using CSS3 (no images)”

Ahmed Bolica
March 18, 2010 at 6:25 pm | Permalink | Reply

Nive article nitin
Rod
April 5, 2010 at 5:01 am | Permalink | Reply

very nice indeed. but how to prevent the “normal” tooltip from appearing ?
1. nitin
  April 5, 2010 at 9:15 am | Permalink | Reply
  
  You can keep the text in some other attribute.
  Like:
  <a class=”tooltip” tip=”This is first tooltip” href=”#”>Link</a>
  
  and make similar changes in CSS:
  content: attr(tip);
Raghib suleman
April 21, 2010 at 11:10 am | Permalink | Reply

thanks nitin very nice work…
None
July 29, 2010 at 11:08 am | Permalink | Reply

Nice, but if the link is after an automatic line break, the tooltip is displayed where the link would be if there wasn’t a break.
Any way to fix this, besides adding a ?
1. nitin
  July 30, 2010 at 11:08 am | Permalink | Reply
  
  I don’t see a direct CSS way to position it correctly in case of line breaks. What you can do instead is to prevent link break in links:
  
  white-space:nowrap;
Saumya
August 27, 2010 at 4:23 pm | Permalink | Reply

This is not support on Image Hover