Can you apply this to an image map title?
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 !
thank you very much !
I’m glad you like it !
nice work.. is this SEO friendly?
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
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
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.
Hi karelles, and thanks for the purchase. Btw, I can’t see the problem because your link is a 404..
NOTE: I removed the ”,” at the end and the problem is still here.
Sorry, http://www.tinacollen.com/excerpts/fleurotica.html will work.
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!
Hey st1s, thank you !
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $1
Unlimited graphic downloads & digital courses. Only $29/month
22,000+ templates & 1,000+ courses
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work