PyVis节点title的HTML标签在悬浮tooltip中无法正常渲染问题

问题现象 #

• PyVis 0.9.1版本中，可在节点title字段写入HTML标签（如<b>标签文本</b>），鼠标悬浮节点时tooltip可正常解析标签，渲染出加粗、斜体等富文本效果，符合预期。
• 切换到PyVis 0.2.1版本后，相同写法失效：鼠标悬浮节点时，tooltip直接展示HTML标签原始字符串，不会解析为对应样式，无法找到对应配置项开启HTML渲染，也未定位到版本差异导致问题的根因。

复现代码 #

可复现问题的HTML代码如下：

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>

<style type="text/css">

        #mynetwork {
            width: 500px;
            height: 500px;
            background-color: #ffffff;
            border: 1px solid lightgray;
            position: relative;
            float: left;
        }
</style>

</head>

<body>
<div id = "mynetwork"></div>


<script type="text/javascript">

    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;

    function drawGraph() {
        var container = document.getElementById('mynetwork');
        
        nodes = new vis.DataSet(
            [
                {
                    "color": "#00ff1e",
                    "id": 1,
                    "title": "<b>NODE 1</b>",
                    "physics": false,
                    "shape": "dot",
                    "label": "I am node 1",
                    "value": 1,
                }
                ,
                {
                    "color": "#162347",
                    "id": 2,
                    "title": "<i>NODE 2</i>",
                    "physics": false,
                    "shape": "dot",
                    "label": "node 2 here",
                    "value": 1,
                },
                {
                    "color": "#dd4b39",
                    "id": 3,
                    "title": "<b><i>NODE 3</i></b>",
                    "physics": false,
                    "shape": "dot",
                    "label": "and im node 3",
                    "value": 1,
                }
                ]
        );
        edges = new vis.DataSet([{"from": 1, "to": 2}, {"from": 1, "to": 3}]);

        data = {nodes: nodes, edges: edges};

        var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};
        
        network = new vis.Network(container, data, options);
        return network;

    }

    drawGraph();

</script>
</body>
</html>

问题根因 #

PyVis 0.2.x版本依赖的vis-network实例默认关闭了tooltip的HTML解析能力，节点title字段会被当做纯文本直接渲染，不会解析其中的HTML标签。

解决方案 #

方案1：修改已生成的HTML文件 #

找到HTML代码中初始化vis.Network的options配置段，在interaction字段下新增tooltip配置，开启HTML解析：

"interaction": {
    "dragNodes": true,
    "hideEdgesOnDrag": false,
    "hideNodesOnDrag": false,
    // 新增以下配置
    "tooltip": {
        "isHtml": true
    }
}

修改保存后重新打开HTML文件，节点title中的HTML标签即可正常渲染。

方案2：Python生成阶段直接配置 #

在PyVis代码中初始化Network对象后，提前开启tooltip的HTML渲染开关，生成的HTML会自动带上对应配置，无需事后修改：

from pyvis.network import Network

# 初始化网络图实例
net = Network()
# 开启tooltip HTML解析能力
net.options.interaction.tooltip_is_html = True

# 正常添加节点、边即可，title支持HTML标签
net.add_node(1, label="I am node 1", title="<b>NODE 1</b>")
net.add_node(2, label="node 2 here", title="<i>NODE 2</i>")
net.add_node(3, label="and im node 3", title="<b><i>NODE 3</i></b>")
net.add_edge(1, 2)
net.add_edge(1, 3)

# 导出HTML
net.write_html("graph.html")

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