官网使用react链接
https://antv-x6.gitee.io/zh/examples/edge/tool#tooltip

改写成vue3
效果：

1. 线上tooltip
   
2. 节点tooltip
   

1.定义tooltip.vue文件

<template>
    <el-tooltip class="box-item" effect="dark" :content="props.content" placement="top" :visible="props.visible">
        <div></div>
    </el-tooltip>
</template>
<script lang="ts" setup>
const props = defineProps<{
    content?: string
    visible?: boolean
}>()
</script>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'Tooltip',
})
</script>

2.定义class

import { Graph, ToolsView, EdgeView } from '@antv/x6'
import { createApp, h } from 'vue'
const app = ref()
// tooltip
class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipToolOptions> {
    private knob: HTMLDivElement
    render() {
        if (!this.knob) {
            this.knob = ToolsView.createElement('div', false) as HTMLDivElement
            this.knob.style.position = 'absolute'
            this.container.appendChild(this.knob)
        }
        return this
    }

    private toggleTooltip(visible: boolean) {
    	let tooltip = this.options.tooltip //接收使用时传入的内容
        app.value && app.value.unmount(this.knob)
        if (visible) {
            app.value = createApp({
                setup() {
                    return () =>
                        h(Tooltip, {
                            visible: visible,
                            content: tooltip,
                        })
                },
            })
            app.value.mount(this.knob)
        }
        console.log(app)
    }

    private onMosueEnter({ e }: { e: MouseEvent }) {
        this.updatePosition(e)
        this.toggleTooltip(true)
    }

    private onMouseLeave() {
        this.updatePosition()
        this.toggleTooltip(false)
    }

    private onMouseMove() {
        this.updatePosition()
        this.toggleTooltip(false)
    }

    delegateEvents() {
        this.cellView.on('cell:mouseenter', this.onMosueEnter, this)
        this.cellView.on('cell:mouseleave', this.onMouseLeave, this)
        this.cellView.on('cell:mousemove', this.onMouseMove, this)
        return super.delegateEvents()
    }

    private updatePosition(e?: MouseEvent) {
        const style = this.knob.style
        if (e) {
            const p = this.graph.clientToGraph(e.clientX, e.clientY)
            style.display = 'block'
            style.left = `${p.x}px`
            style.top = `${p.y}px`
        } else {
            style.display = 'none'
            style.left = '-1000px'
            style.top = '-1000px'
        }
    }

    protected onRemove() {
        this.cellView.off('cell:mouseenter', this.onMosueEnter, this)
        this.cellView.off('cell:mouseleave', this.onMouseLeave, this)
        this.cellView.off('cell:mousemove', this.onMouseMove, this)
    }
}

TooltipTool.config({
    tagName: 'div',
    isSVGElement: false,
})

export interface TooltipToolOptions extends ToolsView.ToolItem.Options {
    tooltip?: string
}
//线
Graph.registerEdgeTool('tooltip', TooltipTool, true)
//节点
Graph.registerNodeTool('tooltip', TooltipTool, true)

3.线使用

graph.addEdge({
  source,
  target,
  attrs: {
    line: {
      stroke: '#A2B1C3',
      strokeWidth: 2,
    },
  },
  //加这个位置
  tools: [
    {
      name: 'tooltip',
      args: {
        tooltip: '{name:'fur'}',//传去内容
      },
    },
  ],
})

节点addNode函数，类似位置，不再举例