Einen Tooltip für Elemente erstellen, die von joinedjs erstellt wurden

Question

Der Titel sagt alles, ich habe ein Diagramm auf Papier erstellt und mit Zellen und Links gefüllt, jetzt muss ich einen Tooltip hinzufügen, um Informationen über jedes Element anzuzeigen (ausgewählt, Hover ...) .

Ich schätze alle Hinweise, Links, Antworten ...

Answer 1

Alles, was Sie sollten in joint.ui.Tooltip gefunden werden müssen, können.

Sie müssen in der Lage sein, den Pfad zu den in Ihrem Diagramm erzeugten Elementen zu definieren, aber das sollte in den meisten Fällen nicht zu schwer sein. Ich habe mit diesem Zeug seit weniger als einer Woche gearbeitet und scheint ziemlich geradlinig zu sein.

Answer 2

Wenn Sie ein <title /> Element mit dem SVG-Markup Ihrer Form Definitionen hinzufügen (unter Annahme Sie benutzerdefinierte Formen verwenden):

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

So zum Beispiel, könnte Ihr Markup wie folgt aussehen:

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

:

Dann können Sie entweder eine statische Tooltip in der Elementdefinition Link zu diesem hinzufügen

oder wegzulassen/überschreiben die title: {text: 'Static Tooltip'} und definieren den Tooltiptext später im Code:

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

Answer 3

I joint.js den „Titel“ Attribut mit dem Muster für die Elemente mit einem „text“ -Attribut eingerichtet zu hand modifiziert. Wenn Sie suchen:

// Make special case for `text` attribute. 

Es gibt einen Block für die Verarbeitung des Attributs "Text". Ich habe diesen Block nach ihm hinzugefügt, um "Titel" zu behandeln. Titelknoten zum aktuellen Element: Es wird die svg prepend

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