Create a Speech-Bubble Tooltip using CSS3 and jQuery

There are a couple of ways to create tooltips, but I decided that I wanted to try and create a very lightweight and good looking tooltip without using any images.

Alright, time to get started.

The HTML

This tooltip is going to work on any <a> link that has a class of “sbtooltip” and contains a title attribute.
<a class="sbtooltip" href="#" title="CSS3 and jQuery">Speech-Bubble Tooltip</a&gt
This is a tooltip and should be very easy to implement, so very little HTML is needed for this to take effect.

The CSS

Before we get into the real CSS, the border property should be explained.
Create a triangle using the border property
As you can see, you can form a triangle using borders. You can also create one of any size as long as you manipulate the border widths – Like we will be doing in the CSS for this tutorial. This is how the Speech-bubble’s pointer will be created.

a.sbtooltip:hover {
	position: relative; /* Allows the tooltip to be absolutely positioned */
	z-index: 100; 
}

/* Speech Bubble */
a.sbtooltip:before {
	background: rgb(224,168,38); /* For browsers that don't support gradients */
	background: -moz-linear-gradient( /* Firefox gradient */
		90deg,
		rgb(207,141,0) 44%,
		rgb(224,168,38) 72%
	);
	background: -webkit-gradient( /* Webkit gradient */
		linear,
		left bottom,
		left top,
		color-stop(0.44, rgb(207,141,0)),
		color-stop(0.72, rgb(224,168,38))
	);
	color: #fff;
	content: attr(data-sbtooltip); /* This takes the content of the attribute named "data-sbtooltip" and displays it within this element – We will use jQuery to take care of this to make sure that the document is still valid xHTML*/
	display: none; /* Hidden until hovered upon */

/* Font, padding, top and right must change depending on the font size you are using on your web page */
	font: 12px Helvetica, Arial, Georgia, sans-serif;
	padding: 5px 10px;
	position: absolute;
	top: 33px;
	right: 0;
 
/* Border radii for different browsers */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

/* Box shadows for different browsers */
	-moz-box-shadow: 0px 0px 4px #999;
	-webkit-box-shadow: 0px 0px 4px #999;
	box-shadow: 0px 0px 4px #999;
}
 
/* Triangle */
a.sbtooltip:after {
	border-width: 12px;
	border-style: solid;
	border-color: transparent transparent rgb(224,168,38) transparent;
	content: ""; /* Forces this pseudo-element to appear on hover */
	display: none;
	height: 2px; /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
	width: 2px;
	position: absolute;
	top: 10px;
	right: 10px;
}

/* Display on hover */
a.sbtooltip:hover:after, a.sbtooltip:hover:before {
	display: block; /* The Speech-bubble tooltip and pointer will appear on hover */
}

Create a file called ‘sbtooltip.css’ and type/paste the CSS into that file.

There you have it! If you add an attribute of “sbtooltip”, containing a value, to an anchor link with a class of “sbtooltip” you will have a functional Speech-Bubble Tooltip!

A major problem with the ‘sbtooltip’ attribute is that the xHTML will not validate
Validation Errors
Preferably, we would have the CSS ‘content’ property do the following:
content: attr(title)

The only problem with this is the browser’s native tooltip will appear over OUR tooltip. The whole reason we are creating a tooltip is to replace that one.

We are faced with a dilemma:
Have the browser’s native tooltip appear over the one we have just made, or have xHTML validation errors.

In order to correct this, we will need the help of the web developer’s best friend. Javascript!

The jQuery javascript

I think it’s going to be easiest to create a function to do our bidding. This will allow us the freedom to apply it to any element very easily so if you decide you want to change the class “sbtooltip” to something else within the CSS, it will be very easy to target a different element with the jQuery. Also, it will give you some insight into how to go about creating a function (If you don’t already know).

// Function name
jQuery.fn.sbTooltip = function() {

	// For each instance of this element
	return this.each(function(){

		// Add the new attribute with title's current value and then remove the title attribute
		jQuery(this).attr({'data-sbtooltip': jQuery(this).attr("title")}).removeAttr("title");

	});

};

This solves both of our problems. The document validates with xHTML strict.
Passed Validation
Create a file called ‘jquery.sbtooltip.js’ and type/paste the function into that file. The function does nothing by itself; we will have to call the ‘sbTooltip’ function to an element, like this:

$(document).ready(function(){
						   
	$("element").sbTooltip();

});

The CSS we have created only works on <a> elements with a class of sbtooltip, so that is what we will be targeting.

Implementation

Before we go any further; if you have gotten to this point, and tried viewing this in Internet Explorer, you might have seen that it doesn’t work properly AND the native tooltip isn’t showing up. To solve this problem we will have to use browser specific code to target everything that ISN’T Internet Explorer. I have saved the CSS as ‘sbtooltip.css’ and the javascript as ‘jquery.sbtooltip.js’ like I suggested earlier. Place the following code within your <head> tag:

<!—jQuery loaded remotely -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/sbtooltip.css" media="screen" />

<script type='text/javascript' src='js/jquery.sbtooltip.js'></script>

<script type="text/javascript"> 
$(document).ready(function(){
						   
	$("a.sbtooltip").sbTooltip();
	
}); 
</script>
<!--<![endif]-->

This code will load in every browser besides IE. You could view this tooltip as ‘progressive enhancement’ since IE users will still have their browser’s native tooltip and they won’t even know they are missing out on anything.

Extra information:

  • The Speech-bubble’s pointer looks good in Firefox and Chrome, decent in Safari, however it looks a bit jagged in Opera. An alternative to using the border could be to use an image or no speech-bubble pointer at all.
  • If you’re <a> hover state includes the property text-decoration: underline, the text within the tooltip will be underlined too – in Webkit browsers (Chrome and Safari).

I hope you’ve learned something worthwhile during this tutorial.

What say you?

  1. CSS border-shapes ftw!

  2. thomas says:

    very nice script but one problem. If you publish more then 1 tooltip on a page, the second tooltip shows the title content of the first tooltip. how can this be solved?

    1. Jamy Golden says:

      Hey Thomas, thanks for letting me know. I’ve updated the javascript on the Demo page, download page and on the tutorial. It wasn’t looking at the title attribute and replacing it for each instance, so I’ve fixed that.

      It should work now. If you find any other problems, let me know :)

  3. thomas says:

    Thanks Jamy, problem solved. An other question. I wonder which property takes care of the width of the tooltip. I get tooltips which are very narrow but with an extremely height. Can you help me out?

    1. Jamy Golden says:

      I’m not sure where exactly the tooltip is getting it’s height from, but you can edit it by adding the ‘width’ property to ‘a.sbtooltip:before’.

      So:
      a.sbtooltip:before { width: 200px; }
      will increase the width

      If you want specific tooltips to have a larger width, you could do something like this:

      HTML:
      <a class=”sbtooltip large” href=”#” title=”example”>Link</a>

      CSS:
      a.sbtooltip.large:before { width: 200px; }

      The CSS will affect <a> elements that have a class of sbtooltip and large.

  4. thomas says:

    Last question. The script does a wonderful job in Firefox, Opera and Safari but fails in Internet Explorer 8. Any idea why?

  5. thomas says:

    Sorry! Missed the last words of the article. Great script

    1. Jamy Golden says:

      Thanks, Glad you found it useful.

  6. Sebestien says:

    quite good post, i definitely will be bookmarking your site

  7. Ramesh says:

    Its not working in IE8.
    After changing the code also.

    1. Jamy Golden says:

      Hey Ramesh, CSS3 doesn’t work in internet explorer at all. The tooltip should look like a normal browser tooltip in Internet explorer.

  8. thanks before for your tuts,
    but i know this bad in IE, as your say CSS3 doesn’work in IE.
    but also i like use CSS3,,

  9. Always21 says:

    Thanks for sharing~

  10. Zac says:

    Hi, how do you get this working to accomodate more complex html included input?
    Thanks
    Z

    1. Jamy Golden says:

      Hi Zac, unfortunately this only supports text – Nothing fancy. I might think of making a tooltip plugin in future though.

  11. tida says:

    Thanks for sharing!

    I’ve one question, what to do if I want to change position of displaying tool tip. THanks!

  12. mat says:

    Hi Jamy,

    this was exactly what i was looking for, however me being me is having a senior moment… how do i call the function to an element (ie where does it go… )?

    i am sure it will pop into my head, however it’s escaping me as its late right now!

    $(document).ready(function(){
    
    	$("element").sbTooltip();
    
    });

    cheers

    Mat

    1. Jamy Golden says:

      Hey mat :)

      Replace “element” with the CSS selector that will target the item that has the sb-tooltip attached to it.

      For example, say every anchor in your #main-content has it, you would add:

      $(document).ready(function(){
      
      	$("#main-content a").sbTooltip();
      
      });

      Is that what you were asking?

    2. mat says:

      Thanks for replying Jamy,

      so often i find really good things like this and no one does :)

      so the last bit of code goes into the > jquery.sbtooltip.js file with the change?

      thanks alot once more :) great subject.. :)

    3. Jamy Golden says:

      No problem :)

      Oh, no that bit goes in the <head> section. You should go over the “Implementation” section in the article again. You should make sure the scripts are in that order.

  13. Kiefer says:

    I am looking to make the triangle not rounded and pointed. I can’t seem to figure out how to do it. I’m sure it’s simple or I am completely off.

    1. Jamy Golden says:

      Yeah, it’s actually quite simple. On a.sbtooltip:after set the width and height to 0 instead of 2px. That should make it pointy =)

    2. Kiefer says:

      O wow, that perfect! Actually one more question do you know if I can flip it around and bubble up instead of down?

    3. Kiefer says:

      Actually, I have been playing with it for a while and I have been trying to get it to work with an image. Is it even possible? I tried putting a word there and then having a text-indent: -9999px; but that doesn’t work because you lose the content in the tooltip instead. Any ideas?

    4. Jamy Golden says:

      Why are you adding the text-indent? Yeah you can get the tooltip to have an image background – The only problem is that it wouldn’t really scale too well if the tooltip gets longer than the one the background was designed for.

    5. Kiefer says:

      I am trying to get the tooltip to work off of an image, instead of type. I have it working I am just trying to flip it over, so the bubble points up instead of down.

  14. Richard says:

    Many thanks for the site. I have a simple problem. How do you get the height to expand dependant upon the amount of content? have tried min-height, height: auto but get a fixed height in Firefox

    1. richard says:

      Have worked it out – again many thanks

  15. Andreas says:

    Good job! Well done.I found this tutorial useful enough and it save my day. Many thanks.

  16. Jiju says:

    There an online tool to create pure css bubble tooltips which can be used in connection with this : http://www.careerbless.com/services/css/csstooltipcreator.php

  17. adam says:

    I am trying to create a travel blog and bought a template yesterday. There is no support what so ever and I am trying modify a curled page corner graffic that slides up and down the page as the user moves up and down the page. I have figured out how to point this graphic to where I want it to go, but I can’t figure out how to tell it what to say. As you can see in the code I have tried to change it to say Testing word bubble.
    Where ever it says Testing word bubble it used to say see other templates. I have opened this line of code in a text editor and have tried everything I can think of, but I am no coder. Can you please tell me what to do with this code so I can make it say what I want it too Please??

    1. Jamy Golden says:

      The title HTML attribute is responsible for the text. Is that what you were looking for?