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);