- mkrapp
Popping up a little box when someone mouses-over an icon or a link is a good way to provide added info without cluttering a page. I was wondering what sort of toolkits people around here are using for tooltip boxes and other nifty page enhancements. Has anyone used the following?
* DoJo: http://dojotoolkit.org/
* JQuery: http://jquery.com/
MooTools is a great little AJAX toolkit, however there are some conflicts between MooTools and Drupal.
JQuery is included with Drupal, and wasn't too hard to pick up. I am using that for all of my AJAX needs now.
I have also used Highslide JS in the past for photo viewing.
I'm a big fan of this type of functionality (when done right). Accessibility is a challenge. Cross-browser, a simple solution is to use the Title attribute. You could also use the <acronym> tag. For the cool stuff, check out this link:
http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascr...
I agree with jsheeha that keeping an eye on accesibility is important when hiding and showing content in this fashion, using title or abbr are the easiest and cleanest way to do this. But if you want to add styles and behaviours the frameworks are a good way to go. I've used scipt.aculo.us,mootools and jquery and all have worked pretty well. I came across similar problems when mixing jquery and prototype/script.aculo.us(which is often bundled with many a cms).
I followed some tips from this blog post and all was well:http://disjointthoughts.com/2007/08/17/getting-thickbox-jquery-and-prototype-to-play-together-nicely/
Here is the just of the post, in case the link goes away:
<--Start Blurb -- Source: disjoint thoughts, Aug 17th,2007 -->
Both jQuery and prototype define “$” as an alias in the global namespace. When you try to use the “$” shortcut and both libraries are included, the browser complains. Lucky jQuery gives you a way to override “$” and let prototype use it thus resolving the conflict:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
</head>
<body></html>
After calling jQuery.noConflict(), you can still use jQuery “$” functionality, but you have to call it using “jQuery(’foo’)” instead of “$(’foo’)”.
<--End Blurb -->
This issue was illuminated in trying to implement thickbox, but the same fix applies anytime the two frameworks are used together.
gt @ biodesign institute