Tooltips

Die Tooltip-Menüoptionen konfigurieren standardmäßige und benutzerdefinierte Tooltips für Knoten und Kanten.

Standardmäßig:

• Tooltips sind aktiviert.
• Knoten- und Kantentitel/Untertitel stammen aus ihren jeweiligen Header-Maps.
• Eigenschaften stammen aus den Knoten-/Kanten-Eigenschaftskarten.

Tooltips deaktivieren

Ziemlich einfach, indem Sie die Eigenschaft enabled auf false setzen.

const options = {
    UI: {
        tooltip: { 
            enabled: false
        }
    }
}

Auswählen, was einen Tooltip anzeigt

enabled benötigt auch eine Karte von Arten oder eine Funktion für ein Diagramm, das nur bei einigen Hovern Tooltips benötigt. Die Arten sind nodes, edges und groups, die Gruppen Simplify zeichnet. Ein fehlender Schlüssel ist true, daher behält { edges: false } Knoten und Gruppen bei.

Ein Diagramm, dessen Knoten beim Hover bereits zu einer detaillierten Karte werden, hat keinen Bedarf für einen Knoten-Tooltip, aber eine Gruppe erklärt sich nur in ihrem Tooltip, bevor sie geöffnet wird:

const options = {
    UI: {
        tooltip: { 
            enabled: { nodes: false, edges: false, groups: true }
        }
    }
}

Bei jedem Hover wird eine Funktion mit dem Element und seiner Art ('node', 'edge' oder 'group') abgefragt. Eine Funktion, die auslöst, zählt als false und der Fehler wird einmal pro Element protokolliert.

const options = {
    UI: {
        tooltip: { 
            enabled: (element, kind) => kind === 'node' && element.getData().important === true
        }
    }
}

Der Tooltip selbst wird nur weggelassen, wenn enabled false ist oder eine Karte mit allen Arten deaktiviert ist.

Header-Mapping

Ähnlich wie bei der Zuordnung im Hauptheader der Seitenleiste können Sie eine Zuordnung für den Tooltip-Header sowohl für Knoten als auch für Kanten bereitstellen.

Mapping for node and edge

const options = {
    UI: {
        tooltip: {  
            nodeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.description ?? ''
            },
            edgeHeaderMap: {
                title: edge => `Edge ${edge.from} → ${edge.to}`,
                subtitle: edge => edge.data.label ?? ''
            }
        }
    }
}

Zusätzlicher Inhalt

Ähnlich wie beim zusätzlichen Inhalt der Seitenleiste können Sie zusätzlichen Inhalt definieren, der am Ende des Tooltips angehängt wird.

Extra content

const options = {
    UI: {
        tooltip: { 
            renderNodeExtra: (node) => {
                const div = document.createElement('div')
                div.textContent = `Type: ${node.data.type ?? 'Unknown'}`
                return div
            },
            renderEdgeExtra: (edge) => `Weight: ${edge.data.weight ?? '0'}`
        }
    }
}

Benutzerdefiniertes Rendering

Schließlich können Sie den Inhalt eines Tooltips mit der Funktion render vollständig überschreiben.

Custom tooltip

const options = {
    UI: {
        tooltip: {
            render: (element) => {
                const div = document.createElement('div')
                div.textContent = `Element ID: ${element.id}`
                div.style.fontWeight = 'bold'
                return div
            }
        }
    }
}

Tooltip-Inhalt abrufen

render, renderNodeExtra, renderEdgeExtra, nodePropertiesMap und edgePropertiesMap können alle async sein. Der Tooltip zeigt einen Platzhalter an, während die Zusage aussteht, tauscht den Inhalt aus, wenn er aufgelöst wird, und positioniert sich neu, sodass der erweiterte Tooltip auf dem Bildschirm bleibt.

const options = {
    UI: {
        tooltip: {
            renderNodeExtra: async (node, { signal }) => { 
                const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
                return renderChips(await res.json())
            },
        },
    },
}

Der Tooltip ist die Oberfläche, auf die es am meisten ankommt, da es sich um einen einzeln wiederverwendeten Container handelt, der mit einer Verzögerung von 400 ms geöffnet wird: Ein für einen Knoten gestarteter Abruf würde andernfalls in einem Tooltip landen, der bereits einen anderen Knoten beschreibt. Dies ist hier nicht möglich – wenn Sie den Mauszeiger über einen zweiten Knoten bewegen, wird das signal des ersten Renderings abgebrochen und das Ergebnis verworfen, selbst wenn es zuletzt aufgelöst wird. Siehe asynchroner Inhalt für den vollständigen Vertrag und für UI.asyncContent, das den Platzhalter anpasst.

Anheften eines ausstehenden Tooltips

Das Anheften, während der Inhalt noch geladen wird, ist in Ordnung: Die Kopie wird automatisch ausgefüllt, wenn der Abruf abgeschlossen ist, sofern sie nicht zuvor durch einen anderen Hover ersetzt wurde.