WebPagetest Forums
JavaScript or CSS Based Tooltip - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Optimization Discussions (/forumdisplay.php?fid=5)
+--- Thread: JavaScript or CSS Based Tooltip (/showthread.php?tid=284)



JavaScript or CSS Based Tooltip - green-watch.org - 07-01-2010 06:10 AM

Hey Guys,

I am just wondering what tooltips you use for your own websites?

I have been using a JavaScript based tooltip called prototip2:
http://www.nickstakenburg.com/projects/prototip2/

Some issues I have with this JavaScript based tooltip are:

#1 - It requires prototype.js to be included and that library is quite large. Not only does large JavaScript files take a bit to download, but it makes the page bloated with unnecessary code. It increases DOM objects as well.

#2 - It seems when I import the prototype.js with the tooltip javascript attached at the end, Chrome does not always display the tooltip correctly. It works correctly in other browsers. It appears like some sort of race condition perhaps but I can not put my finger on it yet. When the prototype.js code + tooltip code gets downloaded, I have a handler that checks to see if the body onload event has been triggered and if it has, then the tooltip initialization code gets executed. Otherwise, it just waits until the body onload event occurs.

Sincerely,
Travis Walters


RE: JavaScript or CSS Based Tooltip - jarrod1937 - 07-01-2010 07:32 AM

Yeah, this is also something i'd avoid using javascript for since there is a way to do it purely with css:
http://trentrichardson.com/examples/csstooltips/

That particular implementation also uses two images, but you can use css to style it without them.


RE: JavaScript or CSS Based Tooltip - green-watch.org - 07-08-2010 11:25 AM

My friend sent me this link on Facebook:
http://sixrevisions.com/css/css-only-tooltips/