是否有一种简单的方法在dojox.gfx形状上添加工具提示

Question

我在http://bugs.dojotoolkit.org/ticket/10794中找到了一个解决方案，但它只适用于Dojo1.4

对于DojoVersion1.7，不存在dojox.gfx.tooltip。请..。

Answer 1

这是一个老问题，但在搜索高低之后，我始终没有找到答案，下面是我在gfx形状上显示工具提示的方法。当HTML5画布是呈现器时，这是专门针对解决这个问题的，但是应该与其他呈现器一起工作。这是在Dojo和Dojox 1.8中完成的；还没有在其他版本中尝试过。

主要技巧是使用dijit.Tooltip的静态show()方法和隐藏()方法，为它们提供信息来构建工具提示，而不是创建dijit.Tooltip实例。(dijit.Tooltip实例仅在响应特定DOM元素的情况下显示，如果使用画布渲染器，则无法执行。)使用静态方法，您可以将呈现的工具提示放置在任何您想要的位置，以响应所需的事件。您的主要任务是计算工具提示应该出现在哪里，并确保绑定事件以隐藏()工具提示。

您可能希望存储自己的自定义对象，其中包含要显示()的必要信息；这可以使您的工具提示的管理更容易，如果您有很多工具提示的话。

Tooltip.show()需要以下内容：

• x、y、宽度(w)和高度(h)，以形成一个矩形区域，在其中将出现工具提示(‘

’对象)。

• 是一个字符串，定义呈现的工具提示相对于在‘and’中定义的矩形的位置。请参阅工具提示API中的可能值。
• 是工具提示的内容。

在实现这一点时，有几件事要记住：

在撰写本文时，形状使用dojo/

• ，而不是dojo/on。当您想用hide()而不是使用其包含的值隐藏工具提示时，可以使用传递给show()的‘

’对象引用来标识工具提示，因此不能只使用具有相同值的新对象来隐藏工具提示；在调用show()时需要使用实际引用。(因此，您有自己的自定义“工具提示”信息对象，以便于访问。)

• ‘are’坐标是绝对值，而不是表面元素或表面容器元素值，但您的形状的坐标将以表面值表示。如果这是您的目标，则需要计算显示相对于您的形状的工具提示的绝对值。

关于这一方法：

对于每个想要工具提示的形状或组，在需要显示工具提示时附加一个相应的事件；例如。鼠标，点击，一些按键事件。该事件应该调用静态方法Tooltip.show，并绑定相应的事件，以便在那个时候用Tooltip.hide关闭工具提示。我还喜欢在隐藏()事件触发时立即断开它的连接；在dojo/on中，您将执行on.once (但据我所知，您还不能将dojo/on用于gfx形状)。

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/