Question

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

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

Answer 1

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

<..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以处理＆＃34;标题＆＃34;使用为＆＃34; text＆＃34;的元素建立的模式的属性属性。如果您寻找：

// Make special case for `text` attribute.

将会有一个块来处理＆＃34;文本＆＃34;属性。我在它之后添加了这个块来处理＆＃34; title＆＃34;。它会将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中找到。

您需要能够定义图表中生成的元素的路径，但在大多数情况下这不应该太难。我已经使用这些东西不到一个星期了，看起来相当直接。

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

3 个答案: