Use of Yahoo UI's tooltip and overlay

Monday has seen a big update of the signup code, with, amongst other changes, the use of the Yahoo UI libs. Although prototype is well integrated with rails, Yahoo's extensive documentation and the praise it got from some leading javascript developers got me interested, and I must say I wasn't disappointed. When you download the distribution and uncompress it, you get a directory structure. At first I wasn't sure what I should do but it was quite simple in the end: the build directory has the code for all components of the library. Each component has a source code file (eg calendar.js) , and a minimised source code file (eg calendar-min.js). The source code is exactly the same, but with all white spaces and comments removed. You can use the minimised version as it limits the download size. Some components also have assets, like css and images. The README file explains clearly that "the image source path in the component's CSS file will point to Akamai". I don't use images yet, so I didn't bother about it. The separation in different components makes it easy to only load the javascript files you need. Unlike dojo, there's no require mechanism, and you just insert it in the usual way. I renamed the files, prefixing them with yui-, and put them in the public/javascripts directory of rails. I then included the usual rails code in my layout:

<%= stylesheet_link_tag 'yui-container' %>

<%= javascript_include_tag "yui-yahoo" %>
<%= javascript_include_tag "yui-event" %>
<%= javascript_include_tag "yui-dom" %>
<%= javascript_include_tag "yui-container" %>
A first positive point of the library: everything is under the YAHOO namespace, and you can easily create one for your application, which I did like this:
YAHOO.namespace("madb");
With that, you can put I can put my own variables under YAHOO.madb, eg
YAHOO.madb.my_form = $('myform')
and yes, I used the '$' prototype function. Until now, I haven't had problems using both in the same code. The reason I used the Yahoo libs is that I needed to display information on the signup page about VAT and how it is to be applied according to your locations and status. The info is first displayed as a tooltip when you go with the mouse pointer over a question mark icon. When you choose a country for which VAT is possibly applicable (in short, you're in a EU country), the info is shown again beside the text field in which you can enter you VAT number.

Tooltip

The tooltip, as other components in Yahoo's lib (as far as I know), are created purely in javascript. No markup in the html is needed. Here's how I created a tooltip for the question mark:
  vat_question_tooltip = new YAHOO.widget.Tooltip("who_pays_vat_tooltip", {  
           context:"who_pays_vat",  
           text:"<%= t("madb_vat_explanations") %>", 
           showDelay:100,
           hideDelay:100,
           autodismissdelay: 20000} ); 
The first argument is the id of the tooltip created (from what I understand out of this:"Since Tooltips are generated dynamically, the ID passed to the constructor in the first argument... is assigned element container created by the Tooltip control for this Tooltip when it is rendered"), and after that you pass an hash with all options:
  • context is the id of the element for which we create the tooltip
  • text is the text of the tooltip
  • showDelay (hideDelay) is the delay after which the tooltip is shown (hidden)
  • autodismissdelay is the delay after which the tooltip is hidden, even if the pointer is till over the context element. As my tooltip text is rather long, I set it to 20 seconds
What was a good surprise is that the tooltip text can be html formatted, with links and all. I didn't try yet, but I imagine it could be used with images and other content. So the text property is really its content.

Overlay

From yahoo's Overlay page, an overlay is there "to facilitate the creation of modular content that is absolutely positioned above the flow of a page". That's exactly what I needed to display the information about the vat text field. Again, everything happens in javascript:
      YAHOO.madb.vat_explanations = new YAHOO.widget.Overlay("vat_explanations", { visible:true, constraintoviewport: true, width:"40em"});
      YAHOO.madb.vat_explanations.setBody("<%= t('madb_vat_explanations')%>");
      YAHOO.madb.vat_explanations.render(document.body);
      YAHOO.madb.vat_explanations.cfg.setProperty("context", [YAHOO.madb.vat_field, "tr", "tl"]);
The code is quite clear and self-explanatory except maybe for the last line, which positions the overlay by setting its context property. In this case, we attach the overlay to the element YAHOO.madb.vat_field, and the top right (tr) corner of the overlay is aligned with the top left corner of YAHOO.madb.vat_field. The problem I had with this code is that when the text field was moved on the page due to insertion of html code with javascript, the overlay stayed where it was, and thus wasn't aligned anymore. Here again, the solution was easily found thanks to the documentation available. It consists of refiring the event "context":
      YAHOO.madb.vat_explanations.cfg.refireEvent("context");
I hope this can be useful for someone. I can only encourage you to test the Yahoo UI libs. I was really positively surprised of its clean, well-thought structure and its power. The responsiveness I got on the mailing list was also good (this was actually something I was skeptical about at first: will the Yahoo devs be responsive? Well, the answer is clearly positive).You can expect more use of it in myowndb. The next step is using the calendar component (which I've already used, and which is also a good example of the power available with the yahoo widgets. Maybe that'll be the subject of another post ;-)