Is there a simple approach to add a tooltip on a shape of dojox.gfx

Question

I found a solution in http://bugs.dojotoolkit.org/ticket/10794, but it was only for dojo 1.4

for dojo version 1.7, there is no dojox.gfx.tooltip. Plz...

Answer 1

This is an old question but after searching high and low I never found an answer, so here's what I worked out for making Tooltips show on gfx shapes. This is specifically geared to solve this problem when HTML5 Canvas is the renderer, but should work with the other renderers. This was done in Dojo and Dojox 1.8; haven't tried it in other versions.

The main trick is to use the static show() and hide() methods of dijit.Tooltip, providing them with information to build the tooltip, instead of making dijit.Tooltip instances. (dijit.Tooltip instances only display in response to specific DOM elements being moused over, which won't work if you're using a canvas renderer.) Using the static methods lets you position the rendered Tooltip wherever you want in response to a desired event. Your main task is to calculate where the Tooltip should appear and make sure to bind events to hide() the Tooltip.

You may want to store your own custom objects containing the necessary information to hand to show(); this can make management of your tooltips easier if you have a lot of them.

Tooltip.show() needs the following:

• x, y, width (w), and height (h) to make a rectangular area where the tooltip will appear (the 'around' object).
• A string defining the position of the rendered tooltip relative to the rectangle defined in 'around'. See the Tooltip API for possible values.
• The content of your tooltip.

There's a couple of things to keep in mind when implementing this:

• As of this writing, shapes use dojo/connect, not dojo/on.
• The 'around' object reference you pass into show() is used to identify the tooltip when you want to hide it with hide(), not the values it contains, so you cannot just use a new object with the same values to hide the Tooltip; you need to have the actual reference used when calling show(). (Hence having your own custom 'tooltip' information objects for easy access.)
• The 'around' coordinates are in absolute values, not surface element or surface-container element values, but your shape's coordinates will be in surface values. You'll need to calculate absolute values for showing the tooltip relative to your shape if this is your goal.

On to the method:

For each shape or group that you want tooltipped, attach an event corresponding to when you want the tooltip shown; eg. mouseenter, click, some keypress event. This event should call the static method Tooltip.show, and bind a corresponding event to close the Tooltip with Tooltip.hide at that time. I also like to disconnect the hide() event as soon as it fires; in dojo/on you would do on.once (but as far as I know you can't use dojo/on for gfx shapes yet).

var shape1Bb = shape1.getTransformedBoundingBox();

var shape1Tooltip = {
    content: "<p>I am a black and gray rectangle.</p>",
    around: {
        x: shape1Bb[1].x+myCanvasContainer.offsetLeft,
        y: shape1Bb[1].y-(Math.round((shape1Bb[1].y - shape1Bb[2].y)/2))+myCanvasContainer.offsetTop,
        w: 1,
        h: 1
    },
    position: ["after-centered","before-centered"]
};

shape1.connect("onmouseenter",function(e){
    Tooltip.show(
        shape1Tooltip.content,
        shape1Tooltip.around,
        shape1Tooltip.position
    );
    var mouseOutHandler = shape1.connect("onmouseout",function(e){
        Tooltip.hide(shape1Tooltip.around);
        dojo.disconnect(mouseOutHandler);
    });
});

Jsfiddle: http://jsfiddle.net/XQyy2/