BeautyTips: using the html 5 canvas element

While full HTML 5 support still is years away, it is coming. And with it, some very nice improvements. One of my favourites new elements in HTML 5 is the canvas element. And the nice part about this one is you can actually already use it with todays browsers. Yes. Even with IE6.

BeautyTips
This JQuery library allow you to have dynamically created tooltips (or sometimes called balloons or bubbles) with additional information. This is a great usability improvement often used in image galleries or other overviews where you want to provide some details about items the user is viewing without requiring to actually click on anything. And you won't need to mess around with any images for the balloons because they are actually drawn on demand.

The plugin is developed by Jeff Robbins, one of the guys at Lullabot (we wrote about their podcasts earlier). Lullabot provides training and consultancy, mostly about Drupal, and this plug-in works great with Drupal (which has JQuery built-in in core).

[caption id="attachment_1036" align="aligncenter" width="389" caption="An example using a grid view with thumbnails"][/caption]

Howto use Beautytips with Drupal
The best way is to start at this page where the 0.9 version is released (the most recent version up to this date). There you will find some overview information and a link to the demo page.  This is a great place to look at some of the possible configurations. From the most simple tooltip to full ajax-calls, drop shadows and other eye-candy.

Setting your scripts up for an example as above includes:

• Downloading the plugin from JQuery.com and include it on your page.
• Including the popular HoverIntent script (if you're not already using it).
• The only thing you need for IE6 is to include an extra library called ExplorerCanvas.
• Drupal 6 already includes JQuery 1.2.6.

However, you do want to pay attention at which version you use. Drupal 6 natively has support for JQuery 1.2.6 and if you want to keep using this version of JQuery, you should use version 0.9.1 of BeautyTips. The 0.9.5 version is for JQuery 1.3.x. Be careful with upgrading JQuery in Drupal, there might be scripts in your site (from contributed modules) which rely on JQuery 1.2.x and aren't compatible with the newer one.

• Include the scripts in the right order (JQuery first, then Hoverintent, then Beautytips).
• Create a grid View with thumbnail previews.
• In the Views fields box, also choose content like (in our example)  nid, title, number of comments, username. But exclude these from display (checkbox).
• Setup the thumbnail in the final field at the bottom (order is important or you won't be able to use the variables in the previous step). In our case, an imagecache preset.
• Now, still in views, in the options of this thumbnail field, check "Rewrite the output of this field" and in the textarea underneath, use something like below:

<div id="foto-[nid]" class="img-thumbnail" title="[title] by [name] - [comment_count] reactie(s)">[field_gallery_pictures_fid]</div>

This makes sure the extra info we want to display in the balloon is put in the title attribute.

• As a last step, you need to call the script on the bottom of your page, like below:

$('div.img-thumbnail').bt({ hoverIntentOpts: { interval: 0, timeout: 0 } });
A clean way to do this without hardcoding it in your page.tpl.php is to use the page_preprocess function in your template.php and the drupal_add_js() function (using the footer as scope).

There are far more advanced configurations possible, as you can see on the demo page, but this is a very easy one which requires almost no coding.

• For another tutorial you might want to check out this video

Note about Internet Explorer 8: it seems the 0.9.5 version with JQuery 1.3.x works fine with IE8, but if you use the 1.2.x version you might run into issues where the canvas element isn't drawn (text still appears). Forcing IE8 to treat the website as a IE7 browser using this meta tag.