如何使用jsMind库为思维导图节点添加Tooltip（提示框）？

jsMind本身没有内置提示框的专属配置项，但可以通过两种实用方式实现需求：

方案1：利用原生HTML title 属性（最简实现） #

直接在节点数据中添加title字段，浏览器会自动绑定为DOM元素的原生提示框，鼠标悬停时自动显示。

修改你的节点数据示例：

var mind = {
    meta: {
        name: 'jsMind remote',
        author: 'hizzgdev@163.com',
        version: '0.2',
    },
    format: 'node_tree',
    data: {
        id: 'root',
        topic: 'jsMind',
        children: [
            {
                id: 'easy',
                topic: 'Easy',
                direction: 'left',
                children: [
                    { 
                        id: 'easy1', 
                        topic: 'Easy to show',
                        title: '该节点用于展示jsMind的快速渲染能力' // 新增原生提示属性
                    },
                    {
                        'id': 'other3',
                        'topic': '', // 图片节点需保留topic字段（可空），确保鼠标事件正常触发
                        'background-image': 'ant.png',
                        'width': '100',
                        'height': '100',
                        title: '这是一个自定义图片节点'
                    },
                ],
            },
            {
                id: 'open',
                topic: 'Open Source',
                direction: 'right',
                children: [
                    {
                        'id': 'open2',
                        'topic': 'BSD License',
                        'leading-line-color': '#ff33ff',
                        title: 'jsMind采用BSD开源协议，可自由商用'
                    },
                ],
            }
        ]
    }
};
_jm.show(mind);

方案2：自定义样式提示框（高度灵活） #

如果需要自定义提示框的外观、交互逻辑，可以通过监听jsMind的节点事件实现：

步骤1：添加自定义提示框CSS #

.jsmind-custom-tooltip {
    position: absolute;
    background-color: #2c3e50;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: none;
    z-index: 9999;
    pointer-events: none;
}

步骤2：修改JS代码，绑定事件逻辑 #

// 定义思维导图数据（新增自定义提示字段`tooltip_content`）
var mind = {
    meta: {
        name: 'jsMind remote',
        author: 'hizzgdev@163.com',
        version: '0.2',
    },
    format: 'node_tree',
    data: {
        id: 'root',
        topic: 'jsMind',
        children: [
            {
                id: 'easy',
                topic: 'Easy',
                direction: 'left',
                children: [
                    { 
                        id: 'easy1', 
                        topic: 'Easy to show',
                        tooltip_content: '自定义提示：jsMind支持多种节点样式配置'
                    },
                    {
                        'id': 'other3',
                        'topic': '',
                        'background-image': 'ant.png',
                        'width': '100',
                        'height': '100',
                        tooltip_content: '图片节点支持自定义尺寸与背景图'
                    },
                ],
            },
            {
                id: 'open',
                topic: 'Open Source',
                direction: 'right',
                children: [
                    {
                        'id': 'open2',
                        'topic': 'BSD License',
                        'leading-line-color': '#ff33ff',
                        tooltip_content: 'BSD协议允许修改后闭源商用，只需保留原版权声明'
                    },
                ],
            }
        ]
    }
};

// 渲染思维导图
_jm.show(mind);

// 创建自定义提示框元素
const customTooltip = document.createElement('div');
customTooltip.className = 'jsmind-custom-tooltip';
document.body.appendChild(customTooltip);

// 监听节点鼠标移入事件
_jm.add_event_listener('node_mouseover', function(event) {
    const targetNode = event.node;
    if (targetNode.data.tooltip_content) {
        customTooltip.textContent = targetNode.data.tooltip_content;
        customTooltip.style.display = 'block';
        // 定位提示框到鼠标偏移位置
        customTooltip.style.left = `${event.event.clientX + 15}px`;
        customTooltip.style.top = `${event.event.clientY + 15}px`;
    }
});

// 监听节点鼠标移出事件
_jm.add_event_listener('node_mouseout', function() {
    customTooltip.style.display = 'none';
});

// 可选：监听鼠标移动，让提示框跟随鼠标
_jm.add_event_listener('node_mousemove', function(event) {
    if (customTooltip.style.display === 'block') {
        customTooltip.style.left = `${event.event.clientX + 15}px`;
        customTooltip.style.top = `${event.event.clientY + 15}px`;
    }
});

关键注意点 #

• 方案1兼容性拉满，但样式无法自定义；方案2可完全控制提示框的外观与交互。
• 纯图片节点需保留topic字段（即使为空），否则可能无法触发鼠标事件。
• 自定义字段名称可自由调整，只需保证节点数据与事件逻辑中的字段名一致即可。

内容的提问来源于stack exchange，提问作者Mike