对由jointjs创建的元素进行工具提示

标题说明了一切,我在纸上创建了一个图形并填充了单元格和链接,现在我需要添加一个工具提示来显示有关每个元素的信息(选中,悬停…).

我感谢所有提示,链接,答案……

最佳答案
如果您添加< 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)
});

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

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

转载注明原文:对由jointjs创建的元素进行工具提示 - 代码日志