If you take mouse over any of the two links below, you will see a tooltip. Contents are fetched by an performing an asynchronous HTTP request. While the contents are being fetched, you see a loading icon. Default dojo 0.9 tooltip does not provide a way of loading the contents from a remote location. After the contents are fetched, we use a javascript code to resize the tooltip to max-height and max-width. CSS can also be used for max-height and max-width, but that does not work with IE, and therefore we stick with javascript. Another difference between the default dojo tooltip and this one is that the tooltip loads right below the mouse cursor (and not to the left of it). The tooltip will remain open till the mouse moves out of both the tooltip contents and the link.
We create a custom widget called blogscope.Tooltip based on dijit.Tooltip. The source of this new widget is in application.js, much of which is actually copied from the dijit.Tooltip code. The CSS file used (blogscope.css) also needs to be downloaded. Visit my blog for more explanation on how this works.We use these tooltips heavily in BlogScope. The javascript code for tooltips with Dojo v0.3 is also available.
Note: This page must be reloaded if you want to try the demo again. Dojo v0.9 is used, source of which can be browsed online. This page is tested to work well with Firefox 2.0, Internet Explorer 6, Internet Explorer 7, Safari 3.0.3, and Konqueror 3.5.
Disclaimer: I am not a Javascript guru. I actually learned a of javascript and dojo while writing this code. There may be there is a better way to write the some code.