A lot of people have admired and asked about the Laszlo Mail tooltip. I've submitted it for review, see LPP-918 if you want a preview. It should show up in the incubator after Max has a chance to take a look at it. It was originally written by me, then made beautiful and more usable by Bret Simister, Scott Evans and Peter Andrea.
Using it is straightforward. The tooltip is declared as a child of whatever view the tip is for:
<button text="Do Something">
<tooltip>some helpful text goes here</tooltip>
</button>
When creating it, I had a few requirements.
1) For good performance all tooltips should use a single view
2) Ideally the "look" of the tooltip should be de-coupled from the functionality, so its easy to change.
I decided to take a pretty simple approach by defining an instance called "tooltipview" which initially had the simple requirement of needing a "text" attribute. Later, it evolved to need a "setPointerX" method which determines where the little pointer shows up.
It has a similar design to the components dragstate or resizestate, in that it acts on its parent. At init time, it starts to listen to its parent's "onmouseover" and "onmouseout" events (by creating a couple of delegates). Then it shows the tooltipview onmouseover and hides it onmouseout. I made the tooltips initstage="late" so that the whole app would init before any tooltips do. This may make it so that tooltips don't show up in the first seconds of interacting with the application, but I thought that was the right tradeoff.
Over time, the tooltop has gotten a little fancier to meet requirements that it align differently sometimes. It is still a work in progress. The beauty of open source is that now you can pick it up and use it in your projects and if you make it better, you can submit your improvements back to the community.
Sidenotes: In looking at the code now, I see a number of things I would change. I'm tempted to fix them now, but it is Saturday morning and I've got breakfast and gardening yet to be done:
- The tooltip "showTip" method calls: canvas.tooltipview.bringToFront( this.text ); I have no idea why that works, since I don't think the view method "bringToFront" takes a parameter, but the text ends up getting set. Hmmm. Maybe Max will figure that out in review.
- The tooltip class should extend "node" not "view" which is the default if you don't specify anything in the class declaration. The tooltip has no visual elements in itself, and nodes are slightly faster to create than views.
- oninit event should really override init instead. First, its a bad idea to use events in classes without specifying a name for the method, since a subclass will not be able to control the order that the code executes. (Events are executed in non-deterministic order, but you can control what code you write before and after super. For more detail see best practices wiki page.) Also, plain old methods lead to slightly smaller and faster code than events. There are lots of good reasons to use events, but in this case, a method is the right choice.