2017-03-14 12 views
0

ich visjs Bibliothek, in der doc dieser Bibliothek sie sagen, dass Sie Text oder HTML-Element in einem title-Attribut schreiben kann mit:Können wir HTML-Attribut mit HTML-Element füllen?

Fügen Sie einen Titel für das Element, angezeigt wird, wenn auf die Maus halten der Gegenstand. Der Titel kann ein HTML-Element oder eine Zeichenfolge mit Nur-Text oder HTML sein.

Aber wenn ich versuche, ein Titel-Attribut mit HTML zu bevölkern sie es als Klartext nehmen:

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

Gibt es eine Möglichkeit title-Attribut, um es als HTML-Elemente Inhalt zu behandeln?

+0

Meinen Sie ein [HTML Attribut title] (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) – evolutionxbox

+0

Es ist vielleicht nicht möglich, aber Sie können einen Ersatz Tooltip mit Hilfe von Javascript & HTML – brk

+0

Dank für Ihre Antwort, aber es gibt mir einen Fehler, weil Data-toggle es eine Methode der Bibliothek ... das erwartet wurde..here den Link Wenn Sie einen Blick darauf werfen wollen: http://visjs.org/docs/timeline/#Templates –

Antwort

0

Welche Version von VIS verwenden Sie?

Laden Sie einfach die neueste Version von VIS herunter und der HTML-Tooltip funktioniert.

Ich habe es vor ein paar Minuten mit der Version v4.18.1 versucht und es funktioniert wie ein Charme.

<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

Verwandte Themen