Opened 13 years ago

Closed 12 years ago

Last modified 12 years ago

#6120 closed enhancement (duplicate)

Tooltip: not able to be attached to GFX element

Reported by: [email protected] Owned by: bill
Priority: high Milestone: 1.3
Component: DojoX GFX Version: 0.9
Keywords: Cc: Eugene Lazutkin
Blocked By: Blocking:

Description (last modified by bill)

The Tooltip Widget which ultimately uses dijit.placeOnScreenAroundElement(..) does not account for GFX element positioning.

In the placeOnScreenAroundElment method, which is used to place the Tooltip, the following lines:

var aroundNodeW = aroundNode.offsetWidth; //mb.w;
var aroundNodeH = aroundNode.offsetHeight; //mb.h;

return NaN for SVG elements (not able to test for VML) and as a result the Tooltip is never positioned on the visible screen. dojo.coords does not return correct position info.

A quick work around for this issue is to attach offsetWidth and offsetHeight properties to the GFX elements based on the generated translation matrix:

offsetWidth = matrix.dx + node.radius
offsetHeight = matrix.dy

Code Snippet = this.surface.createGroup(); ="_group"; ={r:node.radius, cx:0, cy:0}).setFill(node.gradient); ="_circle";
node.text ={, align:'middle'}).setFill("black");
node.text.getEventSource().id ="_text";
var matrix = dojox.gfx.matrix.translate(point[0], point[1]);
// HACK: gfx elements to not have the offset* set (or any other positioning) needed by dijit.Tooltip. = matrix.dx + node.radius; = matrix.dy; = matrix.dx + node.radius; = matrix.dy;
node.text.rawNode.offsetWidth = matrix.dx + node.radius;
node.text.rawNode.offsetHeight = matrix.dy;
// end HACK: gfx elements to not have the offset* set (or any other positioning) needed by dijit.Tooltip.;;

new dijit.Tooltip({label: "my tip!", connectId:["_group"]});

Change History (9)

comment:1 Changed 13 years ago by guest

I forgot to put my email in the CC field but if anything is unclear let me know: [email protected]


comment:2 Changed 13 years ago by bill

Milestone: 1.11.3
Owner: set to Eugene Lazutkin
Reporter: changed from guest to [email protected]
Summary: The Tooltip widgit is not able to be attached to GFX elementTooltip: not able to be attached to GFX element
Version: 0.9

Hmm, Eugene do you have any ideas about how to fix this properly? Or if it's worth it? I could easily call dojo._getBorderBox() which returns l and t, but I suspect that will have the same problem as accessing offsetWidth and offsetHeight.

comment:3 Changed 13 years ago by Eugene Lazutkin

Cc: Eugene Lazutkin added
Owner: changed from Eugene Lazutkin to bill
Type: defectenhancement

Yes, Bill. There is absolutely nothing to fix --- we do not support and we cannot support it because graphics either do not use HTML DOM nodes at all, or use special DOM nodes. This ticket should be an enhancement request.

  1. dijit.Tooltip should accept a rectangle or a point in absolute coordinates instead of taking a node. This is a minimal requirement. If you have better ideas, please share them with me. We may want to implement a special gfx tooltip widget, so we will not overload the existing widget.
  2. Graphics shapes already support bounding box rectangles, or anchor points, but we may add some special support to have tighter integration between the gfx and the tooltip.

The solution proposed by the reporter will not work for non-SVG renderers, most notable Canvas, and Silverlight, and for future renderers.

We have to fix â„–1 first, so I am reassigning this ticket to you. When you are done, please reassign it to me so I can enhance my code as well.

comment:4 Changed 13 years ago by bill

Resolution: wontfix
Status: newclosed

OK, I'm going to mark this as "won't fix" for now. If there is more demand for a tooltip on GFX elements we should probably make a separate widget and trac ticket for it. In particular it's impractical to have tooltips on canvas since there are no events on canvas shapes, since they aren't DOM nodes.

comment:5 Changed 13 years ago by Eugene Lazutkin

In all fairness:

  1. There is a demand for tooltips, especially in charting.
  2. Canvas doesn't have events, but the Canvas render can: there is a patch for that in my queue.

comment:7 Changed 12 years ago by enzo

Resolution: wontfix
Status: closedreopened
   1. There is a demand for tooltips, especially in charting.

I absolutely agree! I tried to use the Silverlight renderer for my tooltip-enhanced charts, as a way of escaping the heavy SVG->VML layer overhead when I use that dog MSIE, and I couldn't understand why it wasn't working.

What about superimposing DIV's with "position: absolute" on top of charting elements that support events, and connecting the handlers to their events? That would not work very well for pie slices due to their non-rectangular shapes, but would be OK for bars and line markers.


comment:8 Changed 12 years ago by bill

Component: DijitDojoX GFX
Resolution: duplicate
Status: reopenedclosed

Tooltips are already supported for charting, although it doesn't use the Tooltip widget per se, but rather calls showTooltip() directly. See

Eugene has some code for tooltips on random GFX elements but it isn't checked in yet, so assigning this to him. The code is that GFX registers a handler to return the position of GFX nodes. The framework is there already:

dijit.placeOnScreenAroundElement = function(
	/* DomNode */		node,
	/* Object */		aroundElement,
	/* Object */		aroundCorners,
	/* Function */		layoutNode){

	//	summary:
	//		Like dijit.placeOnScreenAroundNode(), except it accepts an arbitrary object
	//		for the "around" argument and finds a proper processor to place a node.

	return dijit.placementRegistry.match.apply(dijit.placementRegistry, arguments);

(and Tooltip calls showTooltip() which calls which calls the above function)

Actually, this is already filed as #4721.

comment:9 Changed 12 years ago by enzo

Tooltips are already supported for charting, although it doesn't use the Tooltip widget per se, but rather calls showTooltip() directly. See

I know, what I say is they only work with SVG or VML rendering, but not with Silverlight. When I set djConfig.gfxRenderer to 'silverlight,svg', my charts show the lines but not the markers or pie charts (presumably because I associated tooltip to them).

Including Microsoft's Silverlight.js (as mentioned in test_event2d.html) doesn't appear to make any difference.

Note: See TracTickets for help on using tickets.