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
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.

Link

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.

24 Responses

  1. Rod #

    very nice indeed. but how to prevent the “normal” tooltip from appearing ?

    Reply
    • nitin #

      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);

      Reply
      • Hells_Dark #

        data-tooltip (or data-anything) in order to be html 5 compliant ;)

      • kanai #

        how actually to add this content: attr(tip)
        Thanks

    • Alex Ferenci #

      Thanks. If you keep the text in some other attribute it won’t work with ie7,8. Any solution for this?

      Reply
  2. None #

    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 ?

    Reply
    • nitin #

      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;

      Reply
  3. Saumya #

    This is not support on Image Hover

    Reply
  4. Tem #

    We can say whatever we want, but in a way IE6 was and is a very modern, albeit annoying, browser. A lot of things that Firefox, Safari and Opera didn’t get many years later IE6 already supported through filter/ms-filter.

    Reply
  5. noris #

    Thank you. Your example really helped me.

    Reply
  6. martin #

    Is it possible to add a delay like 500ms ?

    And if I remove the original title attribute and add the data-title attribute, will it influence the SEO?

    Reply

Leave a Reply