2017-03-14 99 views
0

我使用visjs库,这个库中的文档,他们说,你可以写一个标题属性中的纯文本或HTML元素:我们可以使用html元素填充html属性吗?

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

但是当我尝试来填充HTML title属性是把它作为一个纯文本:

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

有没有一种方法,使title属性把它的内容作为一个HTML元素?

+0

你的意思是一个[HTML title属性(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title )? – evolutionxbox

+0

这可能是不可能的,但你可以使用javascript&html – brk

+0

来创建工具提示的替代,谢谢你的回答,但是它给了我一个错误,因为数据切换了它的库方法......这是预期的。如果你想看看:http://visjs.org/docs/timeline/#Templates –

回答

0

你使用哪种版本的VIS?

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

我几分钟前用v4.18.1版试过了,它的功能就像一个魅力。

<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() { 
 
\t 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>
#vis-exmaple { 
 
    width: 600px; 
 
    height: 400px; 
 
    border: 1px solid lightgray; 
 
}
<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

http://visjs.org/#download_install

相关问题