Making a tooltip on elements created by jointjs

Question

The title says everything, I created a graph on paper and filled with cells and links, now I need to add a tooltip to display information about every element (selected, hover ...).

I appreciate all hints, links, answers ...

Answer 1

If you add a <title /> element to the SVG markup to your shape definitions (this assumes you are using custom shapes):

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

So for example, your markup might look like this:

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

Then you can either add a static tooltip in the element definition link this:

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

or omit/override the title: {text: 'Static Tooltip'} and define the tooltip text later in code:

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

Answer 2

I modified joint.js to handle the "title" attribute using the pattern established for elements with a "text" attribute. If you look for:

// Make special case for `text` attribute.

There will be a block for handling the "text" attribute. I added this block after it to handle "title". It will prepend the svg:title node to the current element:

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