工具提示

工具提示菜单选项配置节点和边的默认和自定义工具提示。

默认：

• 工具提示已启用。
• 节点和边缘标题/副标题来自各自的标题图。
• 属性来自节点/边属性映射。

禁用工具提示

通过将 enabled 属性设置为 false 非常简单。

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

选择显示工具提示的内容

对于仅在某些悬停时需要工具提示的图形，enabled 还采用类型或函数的映射。种类为nodes、edges、groups，简化组进行抽奖。缺少的键是 true，因此 { edges: false } 保留节点和组。

其节点在悬停时已成长为详细卡片的图表对于节点工具提示没有用处，但组仅在打开之前在其工具提示中解释自身：

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

每次悬停时都会询问一个函数，包含元素及其类型（'node'、'edge' 或 'group'）。抛出计数为 false 的函数，每个元素都会记录一次错误。

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

获取工具提示内容

render、renderNodeExtra、renderEdgeExtra、nodePropertiesMap和edgePropertiesMap都可以是async。当承诺悬而未决时，工具提示会显示一个占位符，在解决时交换内容，并重新定位自身，以便增长的工具提示保留在屏幕上。

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

工具提示是最重要的表面，因为它是一个 单个重用容器 在 400 毫秒延迟后打开：为一个节点启动的获取否则会出现在已经描述另一个节点的工具提示中。它不能在这里 - 悬停第二个节点会中止第一个渲染的 signal 并丢弃其结果，即使它最后解析。请参阅异步内容了解完整合约以及UI.asyncContent（自定义占位符）。

固定待处理的工具提示

在内容仍在加载时固定是可以的：只要它没有被另一个悬停首先取代，副本就会在提取解析时自行填充。