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 ...

Propene

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

Smalt

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

Godbeare

Answer 3

Everything you should need can be found in joint.ui.Tooltip.

You'll need to be able to define the path to the elements generated in your graph, but that shouldn't be too hard in most cases. I've been working with this stuff for less than a week and seems fairly straight forward.

Helsie

joint.ui.Tooltip is only in the (paid for) Rappid toolkit, not the (free) Jointjs toolkit. – Smalt

thats the rappid version the OP is asking for jointjs the free version – Paleozoic