ツールチップ

ツールチップメニューオプションは、ノードとエッジのデフォルトおよびカスタムツールチップを構成します。

デフォルト:

ツールチップが有効になっています。
ノードとエッジのタイトル/サブタイトルは、それぞれのヘッダーマップから取得されます。
プロパティはノード/エッジのプロパティマップから取得されます。

ツールチップの無効化

enabled プロパティを false に設定するだけで非常に簡単です。

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

enabled は、いくつかのツールチップが必要なグラフの場合、種類または関数のマップも受け取ります。ホバリングのみ。種類は nodes、edges、groups で、グループは Simplify 描く。欠落しているキーは true であるため、{ edges: false } はノードとグループを保持します。

カーソルを置くとノードがすでに詳細なカードに成長しているグラフでは、ノードツールチップは使用できません。ただし、グループは開く前にツールチップで説明するだけです。

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

ホバーするたびに、要素とその種類 ('node'、'edge'、または 'group'）。スローする関数は false としてカウントされ、エラーは要素ごとに 1 回ログに記録されます。

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

ツールチップ自体は、enabled が false の場合、またはすべての種類がオフになっているマップの場合にのみ省略されます。

ヘッダーマッピング

サイドバーのメインヘッダーで行われるマッピングと同様に、ノードとエッジの両方のツールヒントのヘッダーにマッピングを提供できます。

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 ?? ''
            }
        }
    }
}

追加コンテンツ

サイドバーの追加コンテンツと同様に、ツールヒントの最後に追加する追加コンテンツを定義できます。

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'}`
        }
    }
}

カスタムレンダリング

最後に、render 関数を使用してツールヒントのコンテンツを完全にオーバーライドできます。

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