Question

我使用visjs库，在这个库的文档中，他们说你可以在title属性中写纯文本或HTML元素：

为项目添加标题，在项目上按住鼠标时显示。标题可以是HTML元素或包含纯文本或HTML的字符串。

但是当我尝试用HTML填充title属性时，它将它作为纯文本：

item.title='<div class="tooltip"><strong>dff</strong><br/>fdkdk</div>';

有没有办法让title属性将其作为HTML元素处理？

Answer 1

您使用哪个版本的VIS？

只需下载最新版本的VIS，html工具提示即可使用。

我在几分钟前使用版本v4.18.1尝试过，它就像一个魅力。

＆＃13;

<script>
$(document).on('ready', function(){
var nodeSet = [{
     id: 1000,
     label: 'Root Node',
     x: -600,
     y: -400,
     physics: false,
     fixed: {
         x: true,
         y: true
     }
 }, {
     id: 1,
     label: '1: Test Tooltip with HTML',
     title: '<strong>HTML</strong> Tooltip'
 }, {
     id: 2,
     label: '1: Test Tooltip without HTML',
     title: 'NO HTML'
 }];

//
$.each(nodeSet, function(  ) {  
	  this.label= this.label.replace( /(.{10})/g,"$1\n")
}); 
//

// create an array with nodes
 var nodes = new vis.DataSet(nodeSet);

 // create an array with edges
 var edges = new vis.DataSet([
 {
     from: 1000,
     to: 1
 },
 {
     from: 1000,
     to: 3
 },  {
     from: 1,
     to: 2
 }, {
     from: 3,
     to: 4
 }, {
     from: 4,
     to: 5
 },  {
     from: 3,
     to: 50
 }, {
     from: 4,
     to: 50
 }]);

 // create a network
 var container = document.getElementById('vis-exmaple');
 var data = {
     nodes: nodes,
     edges: edges
 };
 var options = {
     nodes: {
         shape: 'box',
         size: 15,         
     },
     edges:{ 
         arrows: 'to'
     }     
 };
 var network = new vis.Network(container, data, options);
})
 </script>

＆＃13;

#vis-exmaple {
    width: 600px;
    height: 400px;
    border: 1px solid lightgray;
}

＆＃13;

<link href="http://visjs.org/dist/vis.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://visjs.org/dist/vis.js"></script>

<body>
<p>Test HTML Tooltip VIS.JS</p>
<div id="vis-exmaple"></div>
</body

＆＃13;

http://visjs.org/#download_install

我们可以用html元素填充html属性吗？

1 个答案: