vp76 supports this item


11 comments found.

Can you apply this to an image map title?

Hi codack,

I tested my item on a map and it works !

You only have to change the CSS selector (“a” by “area” if you want the tooltip to display on areas).

It looks very nice ;-) !

Hey axool,

thank you very much :) !



I’m glad you like it !

nice work.. is this SEO friendly?

Hi GoldDust,

Thanks for your comment ! About the SEO , this is only an hidden “SPAN” element inside a “P” element. So yes :) !

So can you get it to work in IE 8 ? That is what comes pre-loaded on most Windows 8 pc’s

IE8 doesn’t know transitions (and it is an important part of this item). That’s why I wrote a “Compatible browsers” section, to specify that this item is compatible with IE10 +..

And at the beginning of the description that these tooltips are a way to show some possibilities of CSS3 . Otherwise, you can add some jQuery code to have the same render !

Ok but most internet users use IE 8 , it works fine in other browsers but looks very bad in IE8 – nobody can really use this then

If people really want animations for IE8 , they can add some JS code.

Like I said, it is a demonstration of some CSS3 features. And, I show the IE8 render in the “Video preview”, to make sure that buyers are not surprised.

But, I don’t find it looks so ugly in IE (it can’t be worse than the default IE look ahah) .. It is simple, with a little transparency, just without animation. The important thing is to have the information display in all browsers, that’s what this item is doing.

Awesome… i fllow you. make more of this clean and nice css 3 animations and i buy it all ;)

Thank you very much Deciso ! I’ll try to make other ones ahah :p

Hi I love this effect

But like everyone else, this is not working for me at all in IE8

I know you did not claim it does, but you mention there is simple jquery alternative.

Is it possible to post the jquery code to emulate effect 1 , as a backup if user is using IE 8


Hi sensoryaddict and thanks for the purchase !

“this is not working for me at all in IE8 ” : You mean, just the animation not working or the tooltip doesn’t appear ? Because I made a bugfix to have the correct render for IE6 /7/8 (but without animation of course), I’ll upload it soon.

For the jQuery alternative (effect 1), I’ll try to do something very soon (I have currently a lot of exams) !

Btw, if you don’t want to wait, send me an email via my profile page, and I’ll send you the fix for IE6 /7/8 about the render (not the animation).

Hello. Thanks for the great script. Will the tooltip move to stay visible when at the webpage edges? Thanks.


As the script is CSS only, it is overflowing the page, yes..

Thank you for the message

Hi vp76, This is me throwing up my hands. This would have seemed to be what I was looking for, but I can’t get it to work.

Site/page is http://www.tinacollen.com/fleurotica.html, and the tooltip is supposed to be over the image called “rosy pussytoes”. I’ve tried a number of different changes to the html and css, none of which have worked. I’m even willing to do without the transitions and transformations in favor of appearing (correctly) and disappearing (correctly). The content shows up in the source of the page, and I think the code is correct, but the tooltip doesn’t appear on hover.

You have some mistakes in your CSS selectors.

You put :

#effect1 a img + div.tooltip
#effect1 a:hover img + div.tooltip, #effect1 a:focus img + div.tooltip

And it should be :

#effect1 a + div.tooltip
#effect1 a:hover + div.tooltip, #effect1 a:focus + div.tooltip

So, you should to remove the “img” tags in your selectors because it’s inside the “a” element and it doesn’t have an adjacent element.

After that, you’ll only have to edit the CSS to your needs :)

Thank you! That worked!

Nice work. GLWS!


vp76 Author

Hey st1s, thank you :) !