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

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

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

*or wait a little bit more for jQuery UI....

comment FAIL.

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

I’ve created a demo for the tooltip plugin based on your technique: http://jqueryjs.googlecode.com/svn/trunk/plugins/tooltip/demo/fg-poly-demo/index.html

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

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

@ 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 :)

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

Scott, this is amazing!
Interesting idea in using borders to make this polygons.

Comment by Eduardo Lundgren on 03/03  at  09:56 PM

nnice!

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

Comment by Luka Kladaric on 03/03  at  10:25 PM

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.

Comment by Dan on 03/03  at  10:46 PM

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!

Comment by paulhan on 03/03  at  11:04 PM

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.

Comment by Paul on 03/04  at  04:54 AM

Very nice..You could use the technique for the small triangle in your comment box :)

Comment by nightS on 03/04  at  05:01 AM

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.

Comment by Jens Schauder on 03/04  at  06:34 AM

@Jens: That’s why this is just a demo, not an actual tooltip implementation.

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

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

Comment by Kristof on 03/04  at  06:48 AM

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!

Comment by Art Lawry on 03/04  at  08:10 AM

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

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

nice implementation, but doesnt work in Opera

Comment by Edgar on 03/04  at  09:42 AM

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

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

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: http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering
It’s crazy that there are things like css-animations being implemented instead of this.

Comment by Bohdan Ganicky on 03/04  at  10:02 AM

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

Comment by Regis on 03/04  at  10:25 AM

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?

Comment by Angelo Simeoni on 03/04  at  10:36 AM

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

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

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

Comment by Vlad Kiperman on 03/04  at  11:56 AM

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?

Comment by Dave McFarland on 03/04  at  12:01 PM

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

Comment by Stoyan on 03/04  at  01:27 PM

@Stoyan Thanks!

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

@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!

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

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.

Comment by Kit Grose on 03/04  at  06:34 PM

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!

Comment by Joan Piedra on 03/04  at  10:44 PM

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.

Comment by Ryan on 03/05  at  12:50 AM

Very nice work Scott.  I’m trying to reproduce your demo locally and I appear to be missing the stylesheet that resides in /style/demopages.  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!)

Comment by Simon on 03/05  at  12:14 PM

Wow this is insanely cool. This has gotta be in the top 10 of “cool things to know about CSS”.

Comment by Lynn on 03/06  at  11:38 AM

I can’t belive that it’s possible without any image 0_o

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

I go for “horrible misuse"…

Comment by Giorgio Sironi on 03/08  at  12:13 PM

I would reccomend staying away from anything CSS3 related, it’s really not supported well by most browsers.

Comment by well on 03/09  at  11:38 AM

There is one more nice tooltip - http://www.taggify.net . 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 .  See demo at http://www.taggify.net/demo.aspx

Comment by Anton Kostylev on 03/11  at  06:11 AM

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

Comment by Xavier on 03/12  at  06:46 AM

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?

Comment by HB on 03/16  at  12:07 PM

@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?

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

great experiment with CSS ! Bravo !

Comment by Soumyabrata Ghosh on 03/27  at  12:22 AM

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.

Comment by Thomas Thomassen on 03/31  at  12:21 PM

awesome solution....thank you

Comment by sachin on 04/01  at  10:56 AM

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!

Comment by BenSky on 04/01  at  03:29 PM

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?

Comment by Leland Clemmons on 04/05  at  07:22 PM

thanks for the great post.
this looks pretty easy and simple.

Comment by brian on 04/05  at  09:24 PM

@Edgar: It works for me (Opera 9.6) ... works on IE 7 too!

Comment by Dennison Uy on 04/06  at  03:55 AM

very good contribution, thanks!

Comment by traza on 04/06  at  06:07 PM

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.

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

I agree, this looks like a piece of cake. Just kidding :)

Comment by Jamorama on 04/18  at  03:05 AM

Very nice work Scott.  I’m trying to reproduce your demo locally and I appear to be missing the stylesheet that resides in /style/demopages.

Comment by strony internetowe on 04/21  at  11:00 AM

Nice post, While running this demo in IE 7 the pointer is dispalyed after the box fades in.  Works fine in FF and Safari. How to overcome this?

Comment by Rax on 04/28  at  03:24 AM

Very usefull tip! Thanks

Comment by Andy on 05/01  at  12:09 PM

This will be work great! Go on :)

Comment by Schauinsnetz on 05/02  at  06:22 PM

Thanks for this CSS trick.

Comment by Max on 05/06  at  08:43 AM

Very nice work. Thanks for helping all

Comment by Apotheke on 06/07  at  05:40 AM

Very nice tooltip. The ease of CSS.

Comment by DJ on 06/08  at  09:00 PM

Interesting twist on CSS. Will try it.

Comment by Transformers on 06/17  at  03:20 PM

This super css hints!!!!!!!!!Thanks a Lot....

Comment by selva Comments on 06/26  at  03:08 PM

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

Comment by vinay on 07/03  at  12:57 AM

It does work fine in IE 8 as well, great work and well done.

Pille

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

cool article thanks .. but i can see tooltips before page load completion without hover on link

Comment by kako on 07/19  at  08:09 PM

Thanks. What about other shapes?

Comment by wholesale on 07/23  at  10:33 PM

Some years ago it would have been impossible to do. I love CSS, I love JavaScipt!
Thanks Scott

Comment by Lespaul777 on 07/26  at  04:03 PM

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…

Comment by Kyle Hotchkiss on 07/29  at  03:50 PM

Wow this is insanely cool. This has gotta be in the top 10 of “cool things to know about CSS”.

Comment by Potenz on 07/29  at  09:33 PM

Hey Scott, I love these little CSS tricks. I’ll give it a try. Thanks, Frank

Comment by panicattack on 08/06  at  08:30 PM

A great solution for my problems in IE 8 , thanks and well done.

Comment by Hanna on 08/08  at  09:52 AM

I go for “horrible misuse”

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

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

Comment by software developer on 08/17  at  06:47 AM

I would like to use it with the Wordpress Thesis Theme. Anyone some expirience with that?

Comment by Brondo on 08/17  at  10:14 AM

Thanks so much for this article. Hope I can put the technique to use on my next project :-)

Comment by Blumen on 08/22  at  06:16 PM

Hi.. thanks for the nice aricle

Comment by Klausen on 08/30  at  06:30 AM

Very nice tooltip. I love CSS

Comment by Usenext on 08/30  at  11:52 AM

It’s definitely a workable solution. Good job!
I put the site in my favorites. Maybe I need it someday.

Comment by Staudi on 09/02  at  04:28 PM

Very nice help for my css problem.. thanks

Comment by Klaudi on 09/15  at  06:01 AM

Well.. now i see my problem. Your site is very importent for useres who has problems with css

Keke

Comment by Kerkchen on 09/15  at  06:03 AM

Many cute help on your site

Comment by Kerkchen on 09/15  at  06:04 AM

How might this be reversed to put the tooltip underneath a link? Thx!

Comment by Mike on 10/02  at  04:58 PM

JUI’s wiki has a test with pulls the tooltip text from an anchor tag’s `title` attribute.  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

Comment by gavin on 10/03  at  09:25 PM

Nice infos.. thanks

Comment by Svenjs on 10/10  at  06:26 AM

More please..i need this informations

Comment by Svenjs1 on 10/10  at  06:26 AM

Such nice tips we need in the net. Great

Comment by Claudos on 10/10  at  06:27 AM

very nice !!

Comment by Daniel on 10/19  at  09:48 AM

Nice page..

good admin ..

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

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.

Comment by Heat22 on 11/01  at  01:40 AM

Wow only with CSS? Gorgeous !

Comment by Jeffrey on 11/06  at  10:13 AM

Beautiful execution using only CSS. Love it!

Comment by Wool rugs on 11/07  at  04:00 AM

nice page thanks admin

Comment by kral oyun on 11/17  at  09:23 PM

Very interesting for me to read this article.

Comment by estetik on 11/18  at  01:33 AM

Scott, this is good tooltip! This is another solution - http://tagmypicture.com/ - javascript based web widget that allows you to tag pictures on your web site and put some context into them.  Try it - http://tagmypicture.com/Demo.aspx :)

Comment by Zoran on 11/18  at  07:01 AM

You have made some great points being a website designer in Leeds some of this really is a great help.

Cheers

Comment by Ryan Dearlove on 11/18  at  08:37 AM

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.

Comment by sygdomme on 11/26  at  03:20 AM

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)

Comment by pearl on 12/10  at  02:26 AM

Very good post. Thank you for sharing the info.

Comment by estetik on 12/11  at  05:00 AM

I really like it! It’s clean and simple…

Comment by Bob on 12/14  at  04:57 PM

JQuery error has been resolved by the programmer .

Comment by Konferenslokaler Stockholm on 12/15  at  06:04 PM

Thanks for the good article.Nice Work

“best regards”

Comment by MeisterX on 01/03  at  09:10 AM

Ms. Hồng Giang
Tel: (043)7713858 (ext 204)
Hotline: 0985 236 9069
Email: daotao@atb.edu.vn

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

Thank you very nice!

Comment by radyo on 01/05  at  10:34 AM

That was the tutorial I searched a lot for. Thank you!

Comment by Martin on 01/07  at  01:44 PM

Great tutorial. I really can use this in my new project, i think!

Comment by Ex Schlampe on 01/18  at  06:00 PM

Great tutorial, this was what I was looking for ! Thanks !

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

poar thx 4 the nice tut! it is amazing and i saved it in my favorites!!! Thx again!

Comment by Reiseblogger on 02/10  at  09:55 AM

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

Comment by dhiraj uphat on 02/12  at  01:51 AM

Great tutorial.

Comment by Simon on 02/12  at  06:28 PM

Wow! Very great tutorial. I really can use this in my new project, i think!

Comment by Kinofilme on 02/17  at  07:11 AM

Thank you, very nice!

Comment by Reisen on 02/19  at  03:47 PM

Very nice. Thank you for sharing.

Comment by Filmberichte on 03/08  at  01:52 PM

Nice try but for myself, i dont like to work with css styles. I prefer the old way with hard coded HTML Tags :-)

Comment by SantaCruze on 03/18  at  04:05 PM

I like it. Thanks.

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

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

Comment by Jacob Gube on 04/03  at  10:02 AM

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

Comment by peter on 05/02  at  12:05 AM

Thanks for sharing your knowledge!

Comment by Ernte on 05/07  at  05:56 PM

Very nice trick. Thanks for sharing.

Comment by Rilwis on 05/14  at  03:14 AM

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.

Comment by Dean on 05/16  at  02:58 PM

thank I like it…

Comment by tutorial blog on 05/17  at  10:26 PM

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>

Comment by Jonathan on 05/20  at  06:23 AM

Jonathan, I’ve tested it that way. What exactly dont work in your test?

Comment by Pfefferspray on 05/29  at  06:09 PM

So praktisch und einfach zu lesen! Vielen Dank!

Comment by Webkatalog on 06/03  at  06:17 AM

Jonathan thanks for comment. Very usefull

Comment by Emin on 06/05  at  03:01 PM

Thanks. İts very hard for me but I won :))))))

Comment by YunusPolis on 06/05  at  03:08 PM

finde ich auch sehr Praktisch die Lösung mit dem css

Comment by karikaturist on 06/21  at  08:31 AM

CSS Tooltip for Thanks.

Comment by cihip on 07/21  at  09:17 AM

ich finde es auch wie schon viele andere Kommentatoren praktisch. Thanks for the usefull tipps.

Comment by visa kreditkarte on 07/28  at  06:42 AM

css is great. saves time and shortens the code and so makes the site faster.
great tutorial. thx

Comment by Kinocharts on 07/28  at  05:24 PM

Fantastic tutorial - I’ve been looking for a way to do this for ages. Many thanks!

Comment by designagencyleeds on 08/18  at  09:10 AM

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…

Comment by Zinsen Konto on 08/19  at  03:28 PM

really nice article, thanks for sharing…

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

Broken in IE 9

Comment by Ben Renegar on 09/29  at  08:21 PM

Great share and good news. Thanks for your effort. BTW: your site works superb. :)

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

Thanks for the information. Very interesting. I’ll read it more accurately and directly implement

Comment by Domainhotel on 10/12  at  01:44 PM

cool! I try directly

Comment by Kaffee on 10/12  at  02:02 PM

in IE 9 is not working

Comment by Pflegezusatzversicherung on 10/19  at  04:19 AM

This is all making sense

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

Of course! I even read that the trailing comma was often the culprit but failed to make the connection.

Comment by basur on 11/02  at  04:06 AM

Great article. Thank you very much for this tip!

Comment by Brennstoffzellen on 11/11  at  03:34 PM

Great tutorial. I really can use this in my new project, i think! Thank you!

Comment by Pelletskessel on 11/11  at  03:36 PM

Smart tutorial and everything works like expected. Huge thanks!

Comment by University on 11/12  at  10:04 AM

For me it was a helpful information and I will test it next time.

Comment by Fussbodenheizung on 11/13  at  10:53 AM

The pdf is great. Good work! Thanks!
thank you godd. admin

Comment by sex on 11/21  at  11:53 AM

Poar thx 4 the nice tut! it is amazing and i saved it in my favorites!!! Thx again! .

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

Wow, great code.  Looks good in your examples.  I have a few places this would work on my sites.  Have you had any issues with IE?  Seem IE always gives me trouble

Comment by Kristen Simmons on 12/07  at  03:14 PM

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

Comment by Oren on 12/13  at  06:07 AM

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.

Comment by AusweisApp on 12/17  at  06:47 PM

Thank you for your article.  ;)

Comment by UPS on 12/28  at  06:34 AM

Great work and a very good code

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

I definitely classify this as a workable solution!

Great! Thank you for this article!

Comment by Beulendoktor on 12/30  at  05:12 AM

Harika bir iş ve çok iyi

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

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

Comment by Christel on 01/23  at  12:48 AM

Soeben haben habe ich die Seite gefunden, echt Cool hier!!!

Gruss aus Bayern

Comment by carmen on 01/25  at  03:10 PM

Good website. I really like this post.

Comment by saltwater aquarium on 01/30  at  08:27 PM

Very practical tips for tool tip. Excellent.

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

Thanks.

Comment by Adil on 02/01  at  01:28 AM

I like it, thank you! Especially the demopages!

Greetings from Germany!
Julia

Comment by Kinofilmefan on 02/20  at  11:41 AM

Checked out that Link aswell. Have to say wasn’t as useful as I thought BUT thanks anyways.

Greetings,
Jo

Comment by Johanna on 02/27  at  05:09 AM

Great tipps. Thanks.

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

Nice tut. Is where a detailed example? Thank you.

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

This a very good contribution, thanks!

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

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!

Comment by DJ Hamburg on 04/13  at  01:47 AM

Great blog, great comments :0)

Comment by Umzugsfirma Berlin on 04/21  at  09:53 AM

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

Comment by apotek dk on 04/27  at  03:06 AM

regelmäßig bin ich hier, super ;-)

Comment by Marina on 05/04  at  03:39 AM

immer wieder schöööööööööööön

Comment by Marina on 05/04  at  03:40 AM

Great article, thanks a lot!

Comment by Florian on 05/14  at  08:30 PM

Gruß und Kuss

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

Thanks. İts very nice solution

Comment by Stromanbieter on 05/31  at  05:52 AM

Love the solution and have been using it for a while however I just had a client upgrade to IE9 :( and now it breaks.  The triangle now renders as a rectangle. IE9 Standards mode.

Comment by Ezra on 06/14  at  10:04 AM

Excellent example! Thanks.

Comment by Half Marathon on 06/14  at  09:16 PM

Really a great reporting and writing very understandable. Great - thank you very much

Comment by Pelletheizung on 06/25  at  10:28 AM

Oh yes! I even read that the trailing comma was often the culprit but failed to make the connection.

Comment by Pelletheizungen on 06/25  at  10:29 AM

Awesome tutorial. Thx.

Comment by Browsergames on 07/01  at  10:55 AM

This is very nice. Thanks for that

Comment by City Deal on 07/05  at  07:08 AM