Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?

Posted by Scott on 03/03/2009

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear.

Recently however, we’ve been working on building the markup for upcoming jQuery UI widgets, we came across a case that prompted us to take another look at the technique. The tooltip widget design, fairly common in websites these days, uses a small triangular “speech bubble” pointer that is typically created quite easily with a background image. However, we wanted to maintain our commitment to keeping our jQuery UI widgets entirely themable, and using an image for that purpose wouldn’t fit with the flexibility jQuery UI requires. How to solve this problem without any need for images? That challenge led us to the experimental approach using polygonal CSS, shown below.

The Design Approach

The jQuery UI planning wiki page has several examples for the tooltips we intend to build into the library. For this article though, we’re just focusing the following simple tooltip design:

tooltip design example

The challenge in executing this for jQuery UI is that we’ll need to pull it off without relying on images for the triangle shapes, because the jQuery UI CSS Framework enables markup to be entirely re-themable, using an infinite combination of backgrounds, borders, corner radius, and more. Using custom images for the pointer triangles would never match the flexibility and scalability of CSS alone. Since polygonal CSS can create non-rectangular shapes without images, perhaps it can provide the means to achieve our goal.

Polygonal CSS works by setting an element’s width to something small and then setting thick borders on less than 4 sides. To make a triangle shape, 2 of those borders have to have transparent color, essentially masking out the one visible border at an angle in attempt to connect corners.

The concept is easiest explained through a code sample. The following CSS will style a div into a red triangle:

div {
    width:0;
    height:0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid red;
    border-bottom: 0;
}

As demonstrated here:

Woohoo!

Making Use of the CSS

Our tooltip will need two of these HTML triangles stacked on top of each other to acheive a container/border effect that matches the body of the tooltip. We’ve done this by using two div embedded div elements. The HTML for the entire tooltip looks like this:

<div class="fg-tooltip ui-widget ui-widget-content ui-corner-all">
    Tooltip content goes here...
    <div class="fg-tooltip-pointer-down ui-widget-content">
        <div class="fg-tooltip-pointer-down-inner"></div>
    </div>
</div>

As you can see, we’re using some classes from the jQuery UI CSS Framework for the visual skin, but the important portions here are the “fg-” classes: fg-tooltip-pointer-down and fg-tooltip-pointer-down-inner. These two classes are used on the speech bubble triangle portion of the tooltip and its child div element. The following CSS will turn this markup into our tooltip design.

/*Tooltip and Pointer CSS*/
.fg-tooltip {
    padding: .8em;
    width: 12em;
    border-width: 2px !important;
    position: absolute;
}
.fg-tooltip .fg-tooltip-pointer-down, .fg-tooltip .fg-tooltip-pointer-down-inner {
    position: absolute;
    width:0;
    height:0;
    border-bottom-width: 0;
    background: none;
}
.fg-tooltip .fg-tooltip-pointer-down {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top-width: 14px;
    bottom: -14px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.fg-tooltip .fg-tooltip-pointer-down-inner {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #fff;
    bottom: auto;
    top: -14px;
    left: -5px;
}

A Demonstration

To demonstrate the full effect, we’ve built a demo page which simply shows and hides the tooltip element when you hover on the links below. We’ve also extended the CSS a little further to allow for 3 different triangle types, depending on which alignment you specify, to match our original design specs.

Abandoning images in favor of this approach allows a lot more opportunities to customize the appearance with stylesheets, and we’ve used the jQuery UI CSS Framework to demonstrate this flexibility. Each tooltip below is styled using a different container class from the CSS Framework (such as ui-widget-header and ui-state-error), demonstrating the unobtrusive nature of this approach.

Demo page

As you can see, the tooltips are entirely themeable with CSS alone, and the diagonals are even transparent, allowing text to show through behind them! They work in all browsers we were able to test - such as Internet Explorer, Safari, Firefox, Opera (almost), and Chrome.

Considerations

The only portion of this experiment that needed a little JavaScript tweaking was the inner triangle color. Since the border color of the inner triangle needs to match the background color of the tooltip content (to connect it visually), we had to add a little script to keep them matched up. This workaround would only really affect tooltips that require theme switching though (a requirement of jQuery UI widgets), so in a the average site you could just set a border color in the CSS and leave it alone.

We should also point out that these tooltips are not made to be production-ready and downloadable widgets, but just for demonstrating the result of the CSS. The technique described above could be used in any number of situations where connecting triangles are needed.

A minor downside of this technique is the fact that it uses a little extra markup for purely visual purposes. Fortunately, the additional markup is very lightweight and will most likely be added dynamically with javascript anyway. These sorts of workarounds are commonly found when CSS falls short of our needs, and you’ll need to consider their impact when using them in production environments.

So whattaya Think?

Crazy idea? Horrible misuse of HTML? Or a workable solution? We’d love to hear your thoughts! Leave a comment below. Thanks for reading.

600

Comments

<div id="commentNumber1" class="commentEntry">
<p>Fantastic article. From time to time I’ll see these polygon “experiment” pages and think--neat. Now I can actually see myself using this technique...wait a litle bit more for jQuery UI to do all the work for me. :)

</div>
    <p class="posted"><a href="#commentNumber1">Comment</a> by

Mike T. on 03/03  at  05:09 PM

<div id="commentNumber2" class="commentEntry">
<p>*or wait a little bit more for jQuery UI....

comment FAIL.

</div>
    <p class="posted"><a href="#commentNumber2">Comment</a> by

Mike T. on 03/03  at  05:10 PM

<div id="commentNumber3" class="commentEntry">
<p>I’ve created a demo for the tooltip plugin based on your technique: <a href="http://jqueryjs.googlecode.com/svn/trunk/plugins/tooltip/demo/fg-poly-demo/index.html" rel="nofollow">http://jqueryjs.googlecode.com/svn/trunk/plugins/tooltip/demo/fg-poly-demo/index.html</a>

Building a tooltip plugin with that technique in mind would certainly work much better, but it works!

</div>
    <p class="posted"><a href="#commentNumber3">Comment</a> by

Jörn Zaefferer on 03/03  at  06:19 PM

<div id="commentNumber4" class="commentEntry fg">
<p>@ Jörn: Pretty cool! Thanks for making that. Looks like it might be missing the inner triangle markup (not sure). Also it would be cool if the framework class it uses was easily adjustable - ui-state-error is probably the least common one to use for this . Our demos  use header, highlight and error so I assume you just grabbed it from there.

Nice work - it’ll be fun to build this into UI in the near future.

We’ll definitely want to work out a good system for triangles on all sides of a box. This article is just a start :)

</div>
    <p class="posted"><a href="#commentNumber4">Comment</a> by

Scott (Filament) on 03/03  at  06:33 PM

<div id="commentNumber5" class="commentEntry">
<p>Scott, this is amazing!

Interesting idea in using borders to make this polygons.

</div>
    <p class="posted"><a href="#commentNumber5">Comment</a> by

Eduardo Lundgren on 03/03  at  09:56 PM

<div id="commentNumber6" class="commentEntry">
<p>nnice!

I’d love to see this wrapped as a reusable solution :) been looking for something clean & simple like this for absolute ages

</div>
    <p class="posted"><a href="#commentNumber6">Comment</a> by

Luka Kladaric on 03/03  at  10:25 PM

<div id="commentNumber7" class="commentEntry">
<p>I definitely classify this as a workable solution (over the alternative: horrible misuse).

I love that Jörn has already run with it- I dig the opacity, btw.

</div>
    <p class="posted"><a href="#commentNumber7">Comment</a> by

Dan on 03/03  at  10:46 PM

<div id="commentNumber8" class="commentEntry">
<p>Wow, that is fabulous. And works in all browsers, particularly IE. It’s certainly the neatest solution I’ve seen for this type of thing, and has application for other things, like comment bubbles. Great work!

</div>
    <p class="posted"><a href="#commentNumber8">Comment</a> by

paulhan on 03/03  at  11:04 PM

<div id="commentNumber9" class="commentEntry">
<p>Have you tried using different border-types to achieve different shapes? Just playing around in Firebug quickly the dashed border style gives an interesting curved shape.

It’d also be interesting to see how you could build these blocks to make more complicated shapes.

Very nice.

</div>
    <p class="posted"><a href="#commentNumber9">Comment</a> by

Paul on 03/04  at  04:54 AM

<div id="commentNumber10" class="commentEntry">
<p>Very nice..You could use the technique for the small triangle in your comment box :)

</div>
    <p class="posted"><a href="#commentNumber10">Comment</a> by

nightS on 03/04  at  05:01 AM

<div id="commentNumber11" class="commentEntry">
<p>Some links for you:

http://www.infimum.dk/HTML/rotatingStar.html
http://www.infimum.dk/HTML/rotatingBox.html
http://www.infimum.dk/HTML/slantinfo.html

example of animations…
or even a js 3d game http://www.jangaron.net/jangaron0.5/jangaron.html

</div>
    <p class="posted"><a href="#commentNumber11">Comment</a> by

mrrau on 03/04  at  06:24 AM

<div id="commentNumber12" class="commentEntry">
<p>Cool. But also interesting to see through what kind of loops web designers have to jump to get things done.

I noted one bug though: Sometimes the tooltips blink slowly. Probably because when the tooltip shows, the mouse pointer is over the tooltip, not the link, so the tooltip disapears and the mouse point is over the link again ...

To reproduce it hover over one of the example links, until the tooltip pops up and then move the mouse pointer over the tip of the tooltip.

</div>
    <p class="posted"><a href="#commentNumber12">Comment</a> by

Jens Schauder on 03/04  at  06:34 AM

<div id="commentNumber13" class="commentEntry">
<p>@Jens: That’s why this is just a demo, not an actual tooltip implementation.

</div>
    <p class="posted"><a href="#commentNumber13">Comment</a> by

Jörn Zaefferer on 03/04  at  06:37 AM

<div id="commentNumber14" class="commentEntry">
<p>Great technique, great article. I love implementing visual gimmicks just through code, but even if its very versatile when it comes to coloring the little tip - I think its still better to spend those 30 bytes for a tiny background image (gif or png) than to have to use an empty element.

I try to avoid that generally

</div>
    <p class="posted"><a href="#commentNumber14">Comment</a> by

Kristof on 03/04  at  06:48 AM

<div id="commentNumber15" class="commentEntry">
<p>I remember trying this maybe 6 months back, but if I remember right it is not fully supported by the browsers I was currently testing on (admittedly, I may have been torturing myself by trying to get it to work in IE5… yikes!).

Well, you’ve inspired me to take a look again!

</div>
    <p class="posted"><a href="#commentNumber15">Comment</a> by

Art Lawry on 03/04  at  08:10 AM

<div id="commentNumber16" class="commentEntry fg">
<p>@jens: the blinking is just due to how we’ve hooked it up to the theme switcher. The technique alone isn’t causing that.

@ Kristof: It just depends on your needs. We use images for the comment box pointers on this site and I don’t see any need to change that.

However, if we were to build this technique out into a real tooltip plugin, it would have collision detection and arrows on all 4 sides of the box (3 types per side). Using images would mean 12 extra assets to request. You could do it with sprites, but then you’d need extra HTML to use that sprite flexibly anyway. We think the argument for using HTML here is valid given the needs.

</div>
    <p class="posted"><a href="#commentNumber16">Comment</a> by

Scott (Filament) on 03/04  at  08:37 AM

<div id="commentNumber17" class="commentEntry">
<p>nice implementation, but doesnt work in Opera

</div>
    <p class="posted"><a href="#commentNumber17">Comment</a> by

Edgar on 03/04  at  09:42 AM

<div id="commentNumber18" class="commentEntry fg">
<p>@Edgar: hmm - we’ll take a look. The red triangle works in Opera. Should be doable.

@ Art: Yeah, IE6 doesn’t support transparent border color either, so we’d need to set those to white or whatever background color matches.

</div>
    <p class="posted"><a href="#commentNumber18">Comment</a> by

Scott (Filament) on 03/04  at  09:46 AM

<div id="commentNumber19" class="commentEntry">
<p>Very smart solution guys. I will definitely try it next time I’m implementing tooltips. But still I pray for CSS3 multiple background images support: <a href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering" rel="nofollow">http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering</a>

It’s crazy that there are things like css-animations being implemented instead of this.

</div>
    <p class="posted"><a href="#commentNumber19">Comment</a> by

Bohdan Ganicky on 03/04  at  10:02 AM

<div id="commentNumber20" class="commentEntry">
<p>@Scott (Filament): Actually, both IE6 and IE5.5 support transparent borders for this kind of “border-art.”  All you need to do is give the sides that should be transparent a “dashed” border-style instead of “solid.” Since IE doesn’t understand “transparent” it renders the borders using the font color, but since dashed borders start with a transparent gap, the color isn’t displayed for the border-art.

</div>
    <p class="posted"><a href="#commentNumber20">Comment</a> by

Regis on 03/04  at  10:25 AM

<div id="commentNumber21" class="commentEntry">
<p>This is interesting, but it feels like mixing content and presentation layers. Is there a real downside to creating the arrow using a background image?

</div>
    <p class="posted"><a href="#commentNumber21">Comment</a> by

Angelo Simeoni on 03/04  at  10:36 AM

<div id="commentNumber22" class="commentEntry fg">
<p>@Regis: Fantastic tip! If that works out, it’ll simplify some workarounds in jQuery UI itself. Thanks:)

@Angelo: Sure, it’s definitely blurring the lines there. Using an image would be the cleanest approach for a simple comment bubble. Keep in mind that this lab article is written in the context of what we need to achieve in jQuery UI’s tooltip plugin. These constraints are theming, 12+ arrow variations, all while being conservative with HTTP requests. I mentioned this in an earlier comment to @Kristof (read “However.."). So in our case, yes we feel the benefits outweigh the downfalls. The overhead in using images for the many cases that a real tooltip plugin needs to support is quite costly in comparison to something we can do without any image requests at all. Furthermore, the markup for this would never be in the source code, but rather appended through DOM scripting. The integrity of the content itself would not be comprimised.

That said, I agree with you from a markup semantics standpoint. This is just an experiment to consider and it may or may not fit the needs of what you’re trying to do. Perhaps we could use more meaningful markup to describe the pointer element (maybe a rel attribute to describe the connection??). Seems like overkill though for an empty div element that will otherwise be ignored.

These sorts of workarounds are common these days for simulating effects that browsers don’t natively allow us to do (such as appending elements to make rounded corners in IE). That’s not to say it’s a perfect approach, but at least it’s unobtrusive.

</div>
    <p class="posted"><a href="#commentNumber22">Comment</a> by

Scott (Filament) on 03/04  at  11:30 AM

<div id="commentNumber23" class="commentEntry">
<p>Very nice application and demo of CSS polygons.

@Art, @Scott: Transparent borders are possible in IE 5.5 & 6: http://www.cssplay.co.uk/boxes/transparent_borders

@Regis: Good call-

Again, very nice demo!!!

</div>
    <p class="posted"><a href="#commentNumber23">Comment</a> by

Vlad Kiperman on 03/04  at  11:56 AM

<div id="commentNumber24" class="commentEntry">
<p>Fantastic technique! I suppose you could also add triangles to the top by putting the empty divs before the tooltip content; then you could even float or use absolute positioning to create left/right triangles.

As for keeping clean semantics in your HTML, if you use JavaScript to inject the empty divs, does it really matter?

</div>
    <p class="posted"><a href="#commentNumber24">Comment</a> by

Dave McFarland on 03/04  at  12:01 PM

<div id="commentNumber25" class="commentEntry">
<p>I dig it. It’s simple and elegant.

Sometimes people go to great lengths to achieve image-free solutions (e.g. gmail buttons) and add more KB than they save, but this is not one of those cases :)

</div>
    <p class="posted"><a href="#commentNumber25">Comment</a> by

Stoyan on 03/04  at  01:27 PM

<div id="commentNumber26" class="commentEntry fg">
<p>@Stoyan Thanks!

</div>
    <p class="posted"><a href="#commentNumber26">Comment</a> by

Scott (Filament) on 03/04  at  02:49 PM

<div id="commentNumber27" class="commentEntry fg">
<p>@everyone: I just updated the demo with fixes for IE6 and Opera.

IE6 needed a “dotted” border style to get transparent borders (thanks @Regis and @Vlad!). It looks much better, though it can vary depending on the angle you use.

Opera just needed a z-index on the tooltips.

Works all around now!

</div>
    <p class="posted"><a href="#commentNumber27">Comment</a> by

Scott (Filament) on 03/04  at  05:40 PM

<div id="commentNumber28" class="commentEntry">
<p>This is phenomenally clever and very well implemented.

When you build the full jQuery UI plugin, will you be making the tip point at the cursor (that is, hover the tooltip above the link, then move the tip point laterally along the link depending on where the cursor is)? That’d be gracefully degradable if the information can’t be determined, since a point coming from the beginning/middle each time is no real loss.

</div>
    <p class="posted"><a href="#commentNumber28">Comment</a> by

Kit Grose on 03/04  at  06:34 PM

<div id="commentNumber29" class="commentEntry">
<p>I find it as a workable solution, makes it easy to keep it themeable without much hussle.

As long as we don’t have thousand of divs to create the polygons it should work.

Good job!

</div>
    <p class="posted"><a href="#commentNumber29">Comment</a> by

Joan Piedra on 03/04  at  10:44 PM

<div id="commentNumber30" class="commentEntry">
<p>Great example you could perhaps optimise the css for that first example into something like this:

width: 0;
border: 20px solid red;
border-width: 30px 20px 0;
border-color: purple transparent transparent;

height isn’t needed as it’s dictated by the top border.

</div>
    <p class="posted"><a href="#commentNumber30">Comment</a> by

Ryan on 03/05  at  12:50 AM

<div id="commentNumber31" class="commentEntry">
<p>Very nice work Scott.&nbsp; I’m trying to reproduce your demo locally and I appear to be missing the stylesheet that resides in /style/demopages.&nbsp; Would you be prepared to make that available or email it to me?

I would very much appreciate it as my learning process normally involves looking at the original code (no I’m not a programmer!)

</div>
    <p class="posted"><a href="#commentNumber31">Comment</a> by

Simon on 03/05  at  12:14 PM

<div id="commentNumber32" class="commentEntry">
<p>Wow this is insanely cool. This has gotta be in the top 10 of “cool things to know about CSS”.

</div>
    <p class="posted"><a href="#commentNumber32">Comment</a> by

Lynn on 03/06  at  11:38 AM

<div id="commentNumber33" class="commentEntry">
<p>I can’t belive that it’s possible without any image 0_o

</div>
    <p class="posted"><a href="#commentNumber33">Comment</a> by

Sklep Zoologiczny Wędkarski on 03/07  at  07:50 PM

<div id="commentNumber34" class="commentEntry">
<p>I go for “horrible misuse"…

</div>
    <p class="posted"><a href="#commentNumber34">Comment</a> by

Giorgio Sironi on 03/08  at  12:13 PM

<div id="commentNumber35" class="commentEntry">
<p>I would reccomend staying away from anything CSS3 related, it’s really not supported well by most browsers.

</div>
    <p class="posted"><a href="#commentNumber35">Comment</a> by

well on 03/09  at  11:38 AM

<div id="commentNumber36" class="commentEntry">
<p>There is one more nice tooltip - <a href="http://www.taggify.net" rel="nofollow">http://www.taggify.net</a> . It’s not CSS but JavaScript based but allows to add tooltips for the part of the image -border is drawn around the object on the image and other parts it’s faded. Cool thing for marking people on the photo as in facebook .&nbsp; See demo at <a href="http://www.taggify.net/demo.aspx" rel="nofollow">http://www.taggify.net/demo.aspx</a>

</div>
    <p class="posted"><a href="#commentNumber36">Comment</a> by

Anton Kostylev on 03/11  at  06:11 AM

<div id="commentNumber37" class="commentEntry">
<p>You can also use the new css3 transform property to rotate a simple div to 45deg. Then you’ll be abble to add all classic css property (border, url...) for this.

$.fn.addArrow = function()
{
if( (’WebkitTransform’ in this[0].style) || (’MozTransform’ in this[0].style) )|| (’transform’ in this[0].style) )
{
$(’<div></div>’)
.css(
{
width: 20, height: 20, position: ‘relative’, // init
backgroundColor: $(this).css(’backgroundColor’) , // get propertie
bottom: -10+’px’, // fix position
margin: ‘0 45% 0 45%’, // center
MozTransform: ‘rotate(45deg)’,
webkitTransform: ‘rotate(45deg)’,
transform: ‘rotate(45deg)’
})
.appendTo(this);
}

</div>
    <p class="posted"><a href="#commentNumber37">Comment</a> by

Xavier on 03/12  at  06:46 AM

<div id="commentNumber38" class="commentEntry">
<p>Very cool! I wonder, though, since it relies on 0-sized divs with missing borders, what is the chance this method will be foiled by an update to a browser’s CSS rendering engine?

</div>
    <p class="posted"><a href="#commentNumber38">Comment</a> by

HB on 03/16  at  12:07 PM

<div id="commentNumber39" class="commentEntry fg">
<p>@HB  I think this is an interesting question and is really the crux of the discussion: is this a “hack” that builds on a CSS rendering anomaly that may change in the future as browser makers update their CSS engines to be more “correct” OR is this all working exactly to the CSS specifications and should not change in the future because it’s technically rending everything correctly even though we’re admittedly throwing some odd values into the CSS (like 0px dimensions).

I hope it’s the latter because I’d be comfortable using this approach only if we think it’s future-proof, not a hack built on a quirk in the current set of browser’s CSS rendering engines.

Anyone out there know the nitty-gritty details of the CSS spec that could weigh in on this?

</div>
    <p class="posted"><a href="#commentNumber39">Comment</a> by

Todd (Filament) on 03/19  at  12:00 PM

<div id="commentNumber40" class="commentEntry">
<p>great experiment with CSS ! Bravo !

</div>
    <p class="posted"><a href="#commentNumber40">Comment</a> by

Soumyabrata Ghosh on 03/27  at  12:22 AM

<div id="commentNumber41" class="commentEntry">
<p>It’s a neat idea. But I’ll still use background-images for this as I don’t want to add extra empty elements. I see examples of using background images which also adds empty elements, but that’s not needed.

</div>
    <p class="posted"><a href="#commentNumber41">Comment</a> by

Thomas Thomassen on 03/31  at  12:21 PM

<div id="commentNumber42" class="commentEntry">
<p>awesome solution....thank you

</div>
    <p class="posted"><a href="#commentNumber42">Comment</a> by

sachin on 04/01  at  10:56 AM

<div id="commentNumber43" class="commentEntry">
<p>Interesting idea, ive never seen this before! Rendering is quite pixelated, i think not a contender against an image yet but most probably for the future!

</div>
    <p class="posted"><a href="#commentNumber43">Comment</a> by

BenSky on 04/01  at  03:29 PM

<div id="commentNumber44" class="commentEntry">
<p>This is insane! I’m not completely sure how this works, though. Is this merely a glitch that was discovered, or did W3C actually mean to put this in?

Also, is this cross-browser?

</div>
    <p class="posted"><a href="#commentNumber44">Comment</a> by

Leland Clemmons on 04/05  at  07:22 PM

<div id="commentNumber45" class="commentEntry">
<p>thanks for the great post.

this looks pretty easy and simple.

</div>
    <p class="posted"><a href="#commentNumber45">Comment</a> by

brian on 04/05  at  09:24 PM

<div id="commentNumber46" class="commentEntry">
<p>@Edgar: It works for me (Opera 9.6) ... works on IE 7 too!

</div>
    <p class="posted"><a href="#commentNumber46">Comment</a> by

Dennison Uy on 04/06  at  03:55 AM

<div id="commentNumber47" class="commentEntry">
<p>very good contribution, thanks!

</div>
    <p class="posted"><a href="#commentNumber47">Comment</a> by

traza on 04/06  at  06:07 PM

<div id="commentNumber48" class="commentEntry fg">
<p>We were sent an interesting polygonal experiment by Hans Gerwitz which uses this same CSS technique to create charts:

http://gerwitz.github.com/progressive-charts/

…and a description at http://hans.gerwitz.com/2009/04/12/progressive-charts.html

Nice work, Hans.

</div>
    <p class="posted"><a href="#commentNumber48">Comment</a> by

Scott (Filament) on 04/14  at  08:42 AM

<div id="commentNumber49" class="commentEntry">
<p>I agree, this looks like a piece of cake. Just kidding :)

</div>
    <p class="posted"><a href="#commentNumber49">Comment</a> by

Jamorama on 04/18  at  03:05 AM

<div id="commentNumber50" class="commentEntry">
<p>Very nice work Scott.&nbsp; I’m trying to reproduce your demo locally and I appear to be missing the stylesheet that resides in /style/demopages.

</div>
    <p class="posted"><a href="#commentNumber50">Comment</a> by

strony internetowe on 04/21  at  11:00 AM

<div id="commentNumber51" class="commentEntry">
<p>Nice post, While running this demo in IE 7  the pointer is dispalyed after the box fades in.&nbsp; Works fine in FF and Safari. How to overcome this?

</div>
    <p class="posted"><a href="#commentNumber51">Comment</a> by

Rax on 04/28  at  03:24 AM

<div id="commentNumber52" class="commentEntry">
<p>Very usefull tip! Thanks

</div>
    <p class="posted"><a href="#commentNumber52">Comment</a> by

Andy on 05/01  at  12:09 PM

<div id="commentNumber53" class="commentEntry">
<p>This will be work great! Go on :)

</div>
    <p class="posted"><a href="#commentNumber53">Comment</a> by

Schauinsnetz on 05/02  at  06:22 PM

<div id="commentNumber54" class="commentEntry">
<p>Thanks for this CSS trick.

</div>
    <p class="posted"><a href="#commentNumber54">Comment</a> by

Max on 05/06  at  08:43 AM

<div id="commentNumber55" class="commentEntry">
<p>Very nice work. Thanks for helping all

</div>
    <p class="posted"><a href="#commentNumber55">Comment</a> by

Apotheke on 06/07  at  05:40 AM

<div id="commentNumber56" class="commentEntry">
<p>Very nice tooltip. The ease of CSS.

</div>
    <p class="posted"><a href="#commentNumber56">Comment</a> by

DJ on 06/08  at  09:00 PM

<div id="commentNumber57" class="commentEntry">
<p>Interesting twist on CSS. Will try it.

</div>
    <p class="posted"><a href="#commentNumber57">Comment</a> by

Transformers on 06/17  at  03:20 PM

<div id="commentNumber58" class="commentEntry">
<p>This  super  css hints!!!!!!!!!Thanks a Lot....

</div>
    <p class="posted"><a href="#commentNumber58">Comment</a> by

selva Comments on 06/26  at  03:08 PM

<div id="commentNumber59" class="commentEntry">
<p>Great :)

Is it possible to make the tooltip behave such that

1. On click the tooltip will be locked and does not fade away onmouseout

</div>
    <p class="posted"><a href="#commentNumber59">Comment</a> by

vinay on 07/03  at  12:57 AM

<div id="commentNumber60" class="commentEntry">
<p>It does work fine in IE 8 as well, great work and well done.

Pille

</div>
    <p class="posted"><a href="#commentNumber60">Comment</a> by

Dr. Pille on 07/15  at  11:49 AM

<div id="commentNumber61" class="commentEntry">
<p>cool article thanks .. but i can see tooltips before page load completion without hover on link

</div>
    <p class="posted"><a href="#commentNumber61">Comment</a> by

kako on 07/19  at  08:09 PM

<div id="commentNumber62" class="commentEntry">
<p>Thanks. What about other shapes?

</div>
    <p class="posted"><a href="#commentNumber62">Comment</a> by

wholesale on 07/23  at  10:33 PM

<div id="commentNumber63" class="commentEntry">
<p>Some years ago it would have been impossible to do. I love CSS, I love JavaScipt!

Thanks Scott

</div>
    <p class="posted"><a href="#commentNumber63">Comment</a> by

Lespaul777 on 07/26  at  04:03 PM

<div id="commentNumber64" class="commentEntry">
<p>My question -  Why doesn’t a native polygon / circle model exist? It’s not too rare you can go to a site and not see just boxes…

</div>
    <p class="posted"><a href="#commentNumber64">Comment</a> by

Kyle Hotchkiss on 07/29  at  03:50 PM

<div id="commentNumber65" class="commentEntry">
<p>Wow this is insanely cool. This has gotta be in the top 10 of “cool things to know about CSS”.

</div>
    <p class="posted"><a href="#commentNumber65">Comment</a> by

Potenz on 07/29  at  09:33 PM

<div id="commentNumber66" class="commentEntry">
<p>Hey Scott, I love these little CSS tricks. I’ll give it a try. Thanks, Frank

</div>
    <p class="posted"><a href="#commentNumber66">Comment</a> by

panicattack on 08/06  at  08:30 PM

<div id="commentNumber67" class="commentEntry">
<p>A great solution for my problems in IE 8 , thanks and well done.

</div>
    <p class="posted"><a href="#commentNumber67">Comment</a> by

Hanna on 08/08  at  09:52 AM

<div id="commentNumber68" class="commentEntry">
<p>I go for “horrible misuse”

</div>
    <p class="posted"><a href="#commentNumber68">Comment</a> by

مسلسلات عربيه on 08/15  at  07:09 PM

<div id="commentNumber69" class="commentEntry">
<p>Thanks , I have already many tools  to make the corners soft , but all have some browser campabality issue, but your works with all the browsers thanks for sharing that with us

</div>
    <p class="posted"><a href="#commentNumber69">Comment</a> by

software developer on 08/17  at  06:47 AM

<div id="commentNumber70" class="commentEntry">
<p>I would like to use it with the Wordpress Thesis Theme. Anyone some expirience with that?

</div>
    <p class="posted"><a href="#commentNumber70">Comment</a> by

Brondo on 08/17  at  10:14 AM

<div id="commentNumber71" class="commentEntry">
<p>Thanks so much for this article. Hope I can put the technique to use on my next project :-)

</div>
    <p class="posted"><a href="#commentNumber71">Comment</a> by

Blumen on 08/22  at  06:16 PM

<div id="commentNumber72" class="commentEntry">
<p>Hi.. thanks for the nice aricle

</div>
    <p class="posted"><a href="#commentNumber72">Comment</a> by

Klausen on 08/30  at  06:30 AM

<div id="commentNumber73" class="commentEntry">
<p>Very nice tooltip. I love CSS

</div>
    <p class="posted"><a href="#commentNumber73">Comment</a> by

Usenext on 08/30  at  11:52 AM

<div id="commentNumber74" class="commentEntry">
<p>It’s definitely a workable solution. Good job!

I put the site in my favorites. Maybe I need it someday.

</div>
    <p class="posted"><a href="#commentNumber74">Comment</a> by

Staudi on 09/02  at  04:28 PM

<div id="commentNumber75" class="commentEntry">
<p>Very nice help for my css problem.. thanks

</div>
    <p class="posted"><a href="#commentNumber75">Comment</a> by

Klaudi on 09/15  at  06:01 AM

<div id="commentNumber76" class="commentEntry">
<p>Well.. now i see my problem. Your site is very importent for useres who has problems with css

Keke

</div>
    <p class="posted"><a href="#commentNumber76">Comment</a> by

Kerkchen on 09/15  at  06:03 AM

<div id="commentNumber77" class="commentEntry">
<p>Many cute help on your site

</div>
    <p class="posted"><a href="#commentNumber77">Comment</a> by

Kerkchen on 09/15  at  06:04 AM

<div id="commentNumber78" class="commentEntry">
<p>How might this be reversed to put the tooltip underneath a link? Thx!

</div>
    <p class="posted"><a href="#commentNumber78">Comment</a> by

Mike on 10/02  at  04:58 PM

<div id="commentNumber79" class="commentEntry">
<p>JUI’s wiki has a test with pulls the tooltip text from an anchor tag’s `title` attribute.&nbsp; I think that approach is better than have a separate div.

Here is the JUI example page for tooltip:
http://jquery-ui.googlecode.com/svn/branches/dev/tests/visual/tooltip/default.html

</div>
    <p class="posted"><a href="#commentNumber79">Comment</a> by

gavin on 10/03  at  09:25 PM

<div id="commentNumber80" class="commentEntry">
<p>Nice infos.. thanks

</div>
    <p class="posted"><a href="#commentNumber80">Comment</a> by

Svenjs on 10/10  at  06:26 AM

<div id="commentNumber81" class="commentEntry">
<p>More please..i need this informations

</div>
    <p class="posted"><a href="#commentNumber81">Comment</a> by

Svenjs1 on 10/10  at  06:26 AM

<div id="commentNumber82" class="commentEntry">
<p>Such nice tips we need in the net. Great

</div>
    <p class="posted"><a href="#commentNumber82">Comment</a> by

Claudos on 10/10  at  06:27 AM

<div id="commentNumber83" class="commentEntry">
<p>very nice !!

</div>
    <p class="posted"><a href="#commentNumber83">Comment</a> by

Daniel on 10/19  at  09:48 AM

<div id="commentNumber84" class="commentEntry">
<p>Nice page..

good admin ..

</div>
    <p class="posted"><a href="#commentNumber84">Comment</a> by

توبيكات on 10/28  at  07:51 AM

<div id="commentNumber85" class="commentEntry">
<p>For “Jörn Zaefferer”

Not Found

The requested URL /svn/trunk/plugins/tooltip/demo/fg-poly-demo/index.html was not found on this server.

</div>
    <p class="posted"><a href="#commentNumber85">Comment</a> by

Heat22 on 11/01  at  01:40 AM

<div id="commentNumber86" class="commentEntry">
<p>Wow only with CSS? Gorgeous !

</div>
    <p class="posted"><a href="#commentNumber86">Comment</a> by

Jeffrey on 11/06  at  10:13 AM

<div id="commentNumber87" class="commentEntry">
<p>Beautiful execution using only CSS. Love it!

</div>
    <p class="posted"><a href="#commentNumber87">Comment</a> by

Wool rugs on 11/07  at  04:00 AM

<div id="commentNumber88" class="commentEntry">
<p>nice page thanks admin

</div>
    <p class="posted"><a href="#commentNumber88">Comment</a> by

kral oyun on 11/17  at  09:23 PM

<div id="commentNumber89" class="commentEntry">
<p>Very interesting for me to read this article.

</div>
    <p class="posted"><a href="#commentNumber89">Comment</a> by

estetik on 11/18  at  01:33 AM

<div id="commentNumber90" class="commentEntry">
<p>Scott, this is good tooltip! This is another solution - <a href="http://tagmypicture.com/" rel="nofollow">http://tagmypicture.com/</a> - javascript based web widget that allows you to tag pictures on your web site and put some context into them.&nbsp; Try it - <a href="http://tagmypicture.com/Demo.aspx" rel="nofollow">http://tagmypicture.com/Demo.aspx</a>  :)

</div>
    <p class="posted"><a href="#commentNumber90">Comment</a> by

Zoran on 11/18  at  07:01 AM

<div id="commentNumber91" class="commentEntry">
<p>You have made some great points being a <a href="http://www.tickingbox.com/business-website-brochure-design.html" rel="nofollow">website designer in Leeds</a> some of this really is a great help.

Cheers

</div>
    <p class="posted"><a href="#commentNumber91">Comment</a> by

Ryan Dearlove on 11/18  at  08:37 AM

<div id="commentNumber92" class="commentEntry">
<p>Jeg kan faktisk se mig selv bruge denne teknik ... vente en lille smule mere for jQuery brugergrænseflade til at gøre alt arbejdet for mig.

</div>
    <p class="posted"><a href="#commentNumber92">Comment</a> by

sygdomme on 11/26  at  03:20 AM

<div id="commentNumber93" class="commentEntry">
<p>this is not working for me in  ie 8  the tooltips are visible and the hover is not responding can you please check it (in firefox it works fine)

</div>
    <p class="posted"><a href="#commentNumber93">Comment</a> by

pearl on 12/10  at  02:26 AM

<div id="commentNumber94" class="commentEntry">
<p>Very good post. Thank you for sharing the info.

</div>
    <p class="posted"><a href="#commentNumber94">Comment</a> by

estetik on 12/11  at  05:00 AM

<div id="commentNumber95" class="commentEntry">
<p>I really like it! It’s clean and simple…

</div>
    <p class="posted"><a href="#commentNumber95">Comment</a> by

Bob on 12/14  at  04:57 PM

<div id="commentNumber96" class="commentEntry">
<p>JQuery error has been resolved by the programmer .

</div>
    <p class="posted"><a href="#commentNumber96">Comment</a> by

Konferenslokaler Stockholm on 12/15  at  06:04 PM

<div id="commentNumber97" class="commentEntry">
<p>Thanks for the good article.Nice Work

“best regards”

</div>
    <p class="posted"><a href="#commentNumber97">Comment</a> by

MeisterX on 01/03  at  09:10 AM

<div id="commentNumber98" class="commentEntry">
<p>Ms. Hồng Giang

Tel: (043)7713858 (ext 204)
Hotline: 0985 236 9069
Email: daotao@atb.edu.vn

</div>
    <p class="posted"><a href="#commentNumber98">Comment</a> by

dao tao giam doc on 01/05  at  09:57 AM

<div id="commentNumber99" class="commentEntry">
<p>Thank you very nice!

</div>
    <p class="posted"><a href="#commentNumber99">Comment</a> by

radyo on 01/05  at  10:34 AM

<div id="commentNumber100" class="commentEntry">
<p>That was the tutorial I searched a lot for. Thank you!

</div>
    <p class="posted"><a href="#commentNumber100">Comment</a> by

Martin on 01/07  at  01:44 PM

<div id="commentNumber101" class="commentEntry">
<p>Great tutorial. I really can use this in my new project, i think!

</div>
    <p class="posted"><a href="#commentNumber101">Comment</a> by

Ex Schlampe on 01/18  at  06:00 PM

<div id="commentNumber102" class="commentEntry">
<p>Great tutorial, this was what I was looking for ! Thanks !

</div>
    <p class="posted"><a href="#commentNumber102">Comment</a> by

Das-Reise-Lexikon on 02/09  at  08:22 AM

<div id="commentNumber103" class="commentEntry">
<p>poar thx 4 the nice tut! it is amazing and i saved it in my favorites!!! Thx again!

</div>
    <p class="posted"><a href="#commentNumber103">Comment</a> by

Reiseblogger on 02/10  at  09:55 AM

<div id="commentNumber104" class="commentEntry">
<p>Its very fine.

I hv implemented it well. But there is one problem tht tooltip not come on cursor position. how we do it?
Please give me solution.

Thanks

</div>
    <p class="posted"><a href="#commentNumber104">Comment</a> by

dhiraj uphat on 02/12  at  01:51 AM

<div id="commentNumber105" class="commentEntry">
<p>Great tutorial.

</div>
    <p class="posted"><a href="#commentNumber105">Comment</a> by

Simon on 02/12  at  06:28 PM

<div id="commentNumber106" class="commentEntry">
<p>Wow! Very great tutorial. I really can use this in my new project, i think!

</div>
    <p class="posted"><a href="#commentNumber106">Comment</a> by

Kinofilme on 02/17  at  07:11 AM

<div id="commentNumber107" class="commentEntry">
<p>Thank you, very nice!

</div>
    <p class="posted"><a href="#commentNumber107">Comment</a> by

Reisen on 02/19  at  03:47 PM

<div id="commentNumber108" class="commentEntry">
<p>Very nice. Thank you for sharing.

</div>
    <p class="posted"><a href="#commentNumber108">Comment</a> by

Filmberichte on 03/08  at  01:52 PM

<div id="commentNumber109" class="commentEntry">
<p>Nice try but for myself, i dont like to work with css styles. I prefer the old way with hard coded HTML Tags :-)

</div>
    <p class="posted"><a href="#commentNumber109">Comment</a> by

SantaCruze on 03/18  at  04:05 PM

<div id="commentNumber110" class="commentEntry">
<p>I like it. Thanks.

</div>
    <p class="posted"><a href="#commentNumber110">Comment</a> by

Pimysi - Affiliate Marketing on 03/20  at  02:37 PM

<div id="commentNumber111" class="commentEntry">
<p>Great technique! Though I’d suggest using something other than a div element, like a block-displayed span or any other element that would make the speech bubble pointer a bit more semantic and also to reduce the “div-iness” of the speech bubble? Three div’s for a tooltip just seems excessive. My $0.02

</div>
    <p class="posted"><a href="#commentNumber111">Comment</a> by

Jacob Gube on 04/03  at  10:02 AM

<div id="commentNumber112" class="commentEntry">
<p>Very interesting post. Thank you for explaining the basics :-)

I have used this trick to improve the perspectivic effect here http://uglydesign.freehostia.com/software/bookgal/bookgal.php

</div>
    <p class="posted"><a href="#commentNumber112">Comment</a> by

peter on 05/02  at  12:05 AM

<div id="commentNumber113" class="commentEntry">
<p>Thanks for sharing your knowledge!

</div>
    <p class="posted"><a href="#commentNumber113">Comment</a> by

Ernte on 05/07  at  05:56 PM

<div id="commentNumber114" class="commentEntry">
<p>Very nice trick. Thanks for sharing.

</div>
    <p class="posted"><a href="#commentNumber114">Comment</a> by

Rilwis on 05/14  at  03:14 AM

<div id="commentNumber115" class="commentEntry">
<p>Looks like crap in IE. If you want things to look good in all browsers Canvas or SVG would be a much better choice. You could even have that work with CSS to keep it easily themeable.

</div>
    <p class="posted"><a href="#commentNumber115">Comment</a> by

Dean on 05/16  at  02:58 PM

<div id="commentNumber116" class="commentEntry">
<p>thank I like it…

</div>
    <p class="posted"><a href="#commentNumber116">Comment</a> by

tutorial blog on 05/17  at  10:26 PM

<div id="commentNumber117" class="commentEntry">
<p>I try to get it working.. but I won’t get it..!

This is what I got just to let it work, i’ll link the scripts in the header later on.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8” />
<title>Test</title>

//quick function for tooltip color match
function fixToolTipColor(){
//grab the bg color from the tooltip content - set top border of pointer to same
$(’.fg-tooltip-pointer-down-inner’).each(function(){
var bWidth = $(’.fg-tooltip-pointer-down-inner’).css(’borderTopWidth’);
var bColor = $(this).parents(’.fg-tooltip’).css(’backgroundColor’)
$(this).css(’border-top’, bWidth+’ solid ‘+bColor);
});
}
//dom ready
$(function(){
//fix color
fixToolTipColor();
//show/hide them on hover
$(’.fg-tooltip’).hide();
$(’.tooltip’).hover(
function(){ $(this).parent().prev(’:hidden’).fadeIn(); },
function(){ $(this).parent().prev(’:visible’).fadeOut(); }
);
});

<style type="text/css">

/*Tooltip and Pointer CSS*/
.fg-tooltip {
padding: .8em;
width: 12em;
border-width: 2px !important;
position: absolute;
z-index: 9999;
}
.fg-tooltip .fg-tooltip-pointer-down, .fg-tooltip .fg-tooltip-pointer-down-inner {
position: absolute;
width:0;
height:0;
border-bottom-width: 0;
background: none;
}
.fg-tooltip .fg-tooltip-pointer-down {
border-left: 7px dotted transparent;
border-right: 7px dotted transparent;
border-top-width: 14px;
bottom:  -14px;
right: auto;
left: 50%;
margin-left: -7px;
}
.fg-tooltip .fg-tooltip-pointer-down-inner {
border-left: 5px dotted transparent;
border-right: 5px dotted transparent;
border-top: 10px solid #fff;
bottom:  auto;
top: -14px;
left: -5px;
}
/*pointer alignment*/
.fg-tooltip-left .fg-tooltip-pointer-down {
border-left: 0;
border-right: 17px dotted transparent;
border-top-width: 14px;
bottom:  -14px;
right: auto;
left: 1em;
margin: 0;
}
.fg-tooltip-left .fg-tooltip-pointer-down-inner {
border-left: 0;
border-right: 12px dotted transparent;
border-top: 10px solid #fff;
bottom:  auto;
top: -14px;
left: 2px;
}
.fg-tooltip-right .fg-tooltip-pointer-down {
border-left: 17px dotted transparent;
border-right: 0;
border-top-width: 14px;
bottom:  -14px;
right: 1em;
left: auto;
margin: 0;
}
.fg-tooltip-right .fg-tooltip-pointer-down-inner {
border-left: 12px dotted transparent;
border-right: 0;
border-top: 10px solid #fff;
bottom:  auto;
top: -14px;
right: 2px;
left: auto;
}

</style>

</head>

<body>

<div id="demoA" style="margin-top:100px;">

<div class="fg-tooltip">Here’s a sample tooltip. The pointer requires no images!
<div class="fg-tooltip-pointer-down">

<div class="fg-tooltip-pointer-down-inner"></div>
</div>
</div>

Here’s a paragraph with a tooltip on top of it. Centered Tooltip! The pointer portion uses no images - only CSS - and is entirely themable by the jQuery UI CSS Framework!

</div>

</body>
</html>

</div>
    <p class="posted"><a href="#commentNumber117">Comment</a> by

Jonathan on 05/20  at  06:23 AM

<div id="commentNumber118" class="commentEntry">
<p>Jonathan, I’ve tested it that way. What exactly dont work in your test?

</div>
    <p class="posted"><a href="#commentNumber118">Comment</a> by

Pfefferspray on 05/29  at  06:09 PM

<div id="commentNumber119" class="commentEntry">
<p>So praktisch und einfach zu lesen! Vielen Dank!

</div>
    <p class="posted"><a href="#commentNumber119">Comment</a> by

Webkatalog on 06/03  at  06:17 AM

<div id="commentNumber120" class="commentEntry">
<p>Jonathan thanks for comment. Very usefull

</div>
    <p class="posted"><a href="#commentNumber120">Comment</a> by

Emin on 06/05  at  03:01 PM

<div id="commentNumber121" class="commentEntry">
<p>Thanks. İts very hard for me but I won :))))))

</div>
    <p class="posted"><a href="#commentNumber121">Comment</a> by

YunusPolis on 06/05  at  03:08 PM

<div id="commentNumber122" class="commentEntry">
<p>finde ich auch sehr Praktisch die Lösung mit dem css

</div>
    <p class="posted"><a href="#commentNumber122">Comment</a> by

karikaturist on 06/21  at  08:31 AM

<div id="commentNumber123" class="commentEntry">
<p>CSS Tooltip for Thanks.

</div>
    <p class="posted"><a href="#commentNumber123">Comment</a> by

cihip on 07/21  at  09:17 AM

<div id="commentNumber124" class="commentEntry">
<p>ich finde es auch wie schon viele andere Kommentatoren praktisch. Thanks for the usefull tipps.

</div>
    <p class="posted"><a href="#commentNumber124">Comment</a> by

visa kreditkarte on 07/28  at  06:42 AM

<div id="commentNumber125" class="commentEntry">
<p>css is great. saves time and shortens the code and so makes the site faster.

great tutorial. thx

</div>
    <p class="posted"><a href="#commentNumber125">Comment</a> by

Kinocharts on 07/28  at  05:24 PM

<div id="commentNumber126" class="commentEntry">
<p>Fantastic tutorial - I’ve been looking for a way to do this for ages. Many thanks!

</div>
    <p class="posted"><a href="#commentNumber126">Comment</a> by

designagencyleeds on 08/18  at  09:10 AM

<div id="commentNumber127" class="commentEntry">
<p>Nice Tip, very usefull. I’ sure I could solve a lot of design problems if i would invest more time in improving my css skills…

</div>
    <p class="posted"><a href="#commentNumber127">Comment</a> by

Zinsen Konto on 08/19  at  03:28 PM

<div id="commentNumber128" class="commentEntry">
<p>really nice article, thanks for sharing…

</div>
    <p class="posted"><a href="#commentNumber128">Comment</a> by

deko web tasarım on 08/24  at  01:34 PM

<div id="commentNumber129" class="commentEntry">
<p>Broken in IE 9

</div>
    <p class="posted"><a href="#commentNumber129">Comment</a> by

Ben Renegar on 09/29  at  08:21 PM

<div id="commentNumber130" class="commentEntry">
<p>Great share and good news. Thanks for your effort. BTW: your site works superb. :)

</div>
    <p class="posted"><a href="#commentNumber130">Comment</a> by

baterie słoneczne on 10/10  at  03:47 PM

<div id="commentNumber131" class="commentEntry">
<p>Thanks for the information. Very interesting. I’ll read it more accurately and directly implement

</div>
    <p class="posted"><a href="#commentNumber131">Comment</a> by

Domainhotel on 10/12  at  01:44 PM

<div id="commentNumber132" class="commentEntry">
<p>cool! I try directly

</div>
    <p class="posted"><a href="#commentNumber132">Comment</a> by

Kaffee on 10/12  at  02:02 PM

<div id="commentNumber133" class="commentEntry">
<p>in IE 9 is not working

</div>
    <p class="posted"><a href="#commentNumber133">Comment</a> by

Pflegezusatzversicherung on 10/19  at  04:19 AM

<div id="commentNumber134" class="commentEntry">
<p>This is all making sense

</div>
    <p class="posted"><a href="#commentNumber134">Comment</a> by

Graphic Design Leeds on 10/28  at  02:33 AM

<div id="commentNumber135" class="commentEntry">
<p>Of course! I even read that the trailing comma was often the culprit but failed to make the connection.

</div>
    <p class="posted"><a href="#commentNumber135">Comment</a> by

basur on 11/02  at  04:06 AM

<div id="commentNumber136" class="commentEntry">
<p>Great article. Thank you very much for this tip!

</div>
    <p class="posted"><a href="#commentNumber136">Comment</a> by

Brennstoffzellen on 11/11  at  03:34 PM

<div id="commentNumber137" class="commentEntry">
<p>Great tutorial. I really can use this in my new project, i think! Thank you!

</div>
    <p class="posted"><a href="#commentNumber137">Comment</a> by

Pelletskessel on 11/11  at  03:36 PM

<div id="commentNumber138" class="commentEntry">
<p>Smart tutorial and everything works like expected. Huge thanks!

</div>
    <p class="posted"><a href="#commentNumber138">Comment</a> by

University on 11/12  at  10:04 AM

<div id="commentNumber139" class="commentEntry">
<p>For me it was a helpful information and I will test it next time.

</div>
    <p class="posted"><a href="#commentNumber139">Comment</a> by

Fussbodenheizung on 11/13  at  10:53 AM

<div id="commentNumber140" class="commentEntry">
<p>The pdf is great. Good work! Thanks!

thank you godd. admin

</div>
    <p class="posted"><a href="#commentNumber140">Comment</a> by

sex on 11/21  at  11:53 AM

<div id="commentNumber141" class="commentEntry">
<p>Poar thx 4 the nice tut! it is amazing and i saved it in my favorites!!! Thx again! .

</div>
    <p class="posted"><a href="#commentNumber141">Comment</a> by

sigara bırakma on 12/01  at  06:02 AM

<div id="commentNumber142" class="commentEntry">
<p>Wow, great code.&nbsp; Looks good in your examples.&nbsp; I have a few places this would work on my sites.&nbsp; Have you had any issues with IE?&nbsp; Seem IE always gives me trouble

</div>
    <p class="posted"><a href="#commentNumber142">Comment</a> by

Kristen Simmons on 12/07  at  03:14 PM

<div id="commentNumber143" class="commentEntry">
<p>Hello.

is there a way to make this tooltip work when i’m hovering the RSS and SEARCH icons ?
i’m using THESIS theme for wordpress and i need some help with - where to put the codes…
thanks :)

</div>
    <p class="posted"><a href="#commentNumber143">Comment</a> by

Oren on 12/13  at  06:07 AM

<div id="commentNumber144" class="commentEntry">
<p>Great work and a very good code! Made some changes and now it works as it should do. IE isn’t a problem in my case.

</div>
    <p class="posted"><a href="#commentNumber144">Comment</a> by

AusweisApp on 12/17  at  06:47 PM

<div id="commentNumber145" class="commentEntry">
<p>Thank you for your article.&nbsp; ;)

</div>
    <p class="posted"><a href="#commentNumber145">Comment</a> by

UPS on 12/28  at  06:34 AM

<div id="commentNumber146" class="commentEntry">
<p>Great work and a very good code

</div>
    <p class="posted"><a href="#commentNumber146">Comment</a> by

اغاني شكشكة on 12/29  at  02:12 PM

<div id="commentNumber147" class="commentEntry">
<p>I definitely classify this as a workable solution!

Great! Thank you for this article!

</div>
    <p class="posted"><a href="#commentNumber147">Comment</a> by

Beulendoktor on 12/30  at  05:12 AM

<div id="commentNumber148" class="commentEntry">
<p>Harika bir iş ve çok iyi

</div>
    <p class="posted"><a href="#commentNumber148">Comment</a> by

escort bayan istanbul on 01/15  at  10:50 PM

<div id="commentNumber149" class="commentEntry">
<p>Hallo

bin gerade mal auf ihre Website gekommen und finde diese wirklich schön und übersichtlich!
Ganz liebe Grüße aus Holm Ostsee

</div>
    <p class="posted"><a href="#commentNumber149">Comment</a> by

Christel on 01/23  at  12:48 AM

<div id="commentNumber150" class="commentEntry">
<p>Soeben haben habe ich die Seite gefunden, echt Cool hier!!!

Gruss aus Bayern

</div>
    <p class="posted"><a href="#commentNumber150">Comment</a> by

carmen on 01/25  at  03:10 PM

<div id="commentNumber151" class="commentEntry">
<p>Good website. I really like this post.

</div>
    <p class="posted"><a href="#commentNumber151">Comment</a> by

saltwater aquarium on 01/30  at  08:27 PM

<div id="commentNumber152" class="commentEntry">
<p>Very practical tips for tool tip. Excellent.

Check also at http://www.adilbadshah.com

Thanks.

</div>
    <p class="posted"><a href="#commentNumber152">Comment</a> by

Adil on 02/01  at  01:28 AM

<div id="commentNumber153" class="commentEntry">
<p>I like it, thank you! Especially the demopages!

Greetings from Germany!
Julia

</div>
    <p class="posted"><a href="#commentNumber153">Comment</a> by

Kinofilmefan on 02/20  at  11:41 AM

<div id="commentNumber154" class="commentEntry">
<p>Checked out that Link aswell. Have to say wasn’t as useful as I thought BUT thanks anyways.

Greetings,
Jo

</div>
    <p class="posted"><a href="#commentNumber154">Comment</a> by

Johanna on 02/27  at  05:09 AM

<div id="commentNumber155" class="commentEntry">
<p>Great tipps. Thanks.

</div>
    <p class="posted"><a href="#commentNumber155">Comment</a> by

Just WEBdesign Berlin on 03/03  at  11:13 AM

<div id="commentNumber156" class="commentEntry">
<p>Nice tut. Is where a detailed example? Thank you.

</div>
    <p class="posted"><a href="#commentNumber156">Comment</a> by

IBO Umzuege Berlin on 03/03  at  11:15 AM

<div id="commentNumber157" class="commentEntry">
<p>This a very good contribution, thanks!

</div>
    <p class="posted"><a href="#commentNumber157">Comment</a> by

Facebook Fanpage Erstellen on 03/30  at  06:22 AM

<div id="commentNumber158" class="commentEntry">
<p><a href="http://vanausda.livejournal.com/" rel="nofollow">http://vanausda.livejournal.com/</a>

</div>
    <p class="posted"><a href="#commentNumber158">Comment</a> by

Harlonghini on 04/09  at  01:28 AM

<div id="commentNumber159" class="commentEntry">
<p>Wow, that is fabulous. And works in all browsers, particularly IE. It’s certainly the neatest solution I’ve seen for this type of thing, and has application for other things, like comment bubbles. Great work!

</div>
    <p class="posted"><a href="#commentNumber159">Comment</a> by

DJ Hamburg on 04/13  at  01:47 AM

<div id="commentNumber160" class="commentEntry">
<p>Great blog, great comments :0)

</div>
    <p class="posted"><a href="#commentNumber160">Comment</a> by

Umzugsfirma Berlin on 04/21  at  09:53 AM

<div id="commentNumber161" class="commentEntry">
<p>Godt indlæg, men dette er ikke i orden for mig i IE 8 det tooltips er synlige, og de ​​pegefølsomme ikke reagerer kan du venligst tjekke det (i firefox det virker fint).

</div>
    <p class="posted"><a href="#commentNumber161">Comment</a> by

apotek dk on 04/27  at  03:06 AM

<div id="commentNumber162" class="commentEntry">
<p>regelmäßig bin ich hier, super ;-)

</div>
    <p class="posted"><a href="#commentNumber162">Comment</a> by

Marina on 05/04  at  03:39 AM

<div id="commentNumber163" class="commentEntry">
<p>immer wieder schöööööööööööön

</div>
    <p class="posted"><a href="#commentNumber163">Comment</a> by

Marina on 05/04  at  03:40 AM

<div id="commentNumber164" class="commentEntry">
<p>Great article, thanks a lot!

</div>
    <p class="posted"><a href="#commentNumber164">Comment</a> by

Florian on 05/14  at  08:30 PM

<div id="commentNumber165" class="commentEntry">
<p>Gruß und Kuss

</div>
    <p class="posted"><a href="#commentNumber165">Comment</a> by

cen/ts45545-2 on 05/21  at  04:55 PM

<div id="commentNumber166" class="commentEntry">
<p>Thanks. İts very nice solution

</div>
    <p class="posted"><a href="#commentNumber166">Comment</a> by

Stromanbieter on 05/31  at  05:52 AM

<div id="commentNumber167" class="commentEntry">
<p>Love the solution and have been using it for a while however I just had a client upgrade to IE9 :( and now it breaks.&nbsp; The triangle now renders as a rectangle. IE9 Standards mode.

</div>
    <p class="posted"><a href="#commentNumber167">Comment</a> by

Ezra on 06/14  at  10:04 AM

<div id="commentNumber168" class="commentEntry">
<p>Excellent example! Thanks.

</div>
    <p class="posted"><a href="#commentNumber168">Comment</a> by

Half Marathon on 06/14  at  09:16 PM

<div id="commentNumber169" class="commentEntry">
<p>Really a great reporting and writing very understandable. Great - thank you very much

</div>
    <p class="posted"><a href="#commentNumber169">Comment</a> by

Pelletheizung on 06/25  at  10:28 AM

<div id="commentNumber170" class="commentEntry">
<p>Oh yes! I even read that the trailing comma was often the culprit but failed to make the connection.

</div>
    <p class="posted"><a href="#commentNumber170">Comment</a> by

Pelletheizungen on 06/25  at  10:29 AM

<div id="commentNumber171" class="commentEntry">
<p>Awesome tutorial. Thx.

</div>
    <p class="posted"><a href="#commentNumber171">Comment</a> by

Browsergames on 07/01  at  10:55 AM

<div id="commentNumber172" class="commentEntry">
<p>This is very nice. Thanks for that

</div>
    <p class="posted"><a href="#commentNumber172">Comment</a> by

City Deal on 07/05  at  07:08 AM