tooltip - 在jointjs创建的元素上制作工具提示

Question

标题说明了一切，我在纸上创建了一个图表并填充了单元格和链接，现在我需要添加一个工具提示来显示有关每个元素的信息（选择，悬停......）。

我感谢所有提示，链接，答案...

Answer 1

如果将<title />元素添加到 SVG 标记到形状定义中（假设您使用的是自定义形状）：

<..shape markup...><title /><...end of shape markup...>

例如，您的标记可能如下所示：

<g class="rotatable">
   <g class="scalable">
      <circle class="element-process"/>
      <title />
   </g><text/>
</g>

然后，您可以在元素定义链接中添加静态工具提示：

joint.shapes.custom.myCircle = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><circle class="element-process"/><title /></g><text/></g>',

    defaults: joint.util.deepSupplement({
        type: 'custom.myCircle,
        attrs: {
            title: {text: 'Static Tooltip'},
            '.element-process': { 'stroke-width': 1, r: 30, stroke: 'black', transform: 'translate(30, 30)' },
            text: { ref: '.element-process'}
        },
        size: { width: 100, height: 100 }
    }, joint.shapes.basic.Generic.prototype.defaults)
});

或稍后在代码中省略/覆盖title: {text: 'Static Tooltip'}并定义工具提示文本：

var cell = new joint.shapes.custom.myCircle();
var toolTip = 'Dynamic Tooltip Text;
cell.attr('title/text', toolTip);

Answer 2

我修改了joint.js 以使用为具有“text”属性的元素建立的模式来处理“title”属性。如果您寻找：

// Make special case for `text` attribute.

将有一个块用于处理“文本”属性。我在它之后添加了这个块来处理“标题”。它将 svg:title 节点添加到当前元素：

if (!_.isUndefined(attrs.title)) {
    var title = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
        node = document.createTextNode(attrs.title);
    title.appendChild(node);

    $selected.each(function () {
       V(this).prepend(title);
    });
}

Answer 3

您应该需要的一切都可以在joint.ui.Tooltip.

您需要能够定义图形中生成的元素的路径，但这在大多数情况下应该不会太难。我用这些东西工作了不到一周，看起来相当直截了当。