Adding qTip2 tooltips to each node of a jsTree - jstree

Question

I am creating a tree structure using thymeleaf in a recursive way to generate the html ul and li elements. Afterwards, I transform this list into a tree using jsTree. Until there, everything is fine. Afterwards, I want to add a tooltip with html content to each element of the tree. I am trying it with qTip2 but for some reason it is only showing an empty tooltip on the root nodes (platform.projectname and platform.projectname2) and nothing at all in the children.
Has anyone done this before? Any advice will be appreciated.
HTML/Thymeleaf container for the tree:
<div id="jstree_demo_div">
<div th:fragment="submenu" th:remove="tag">
<ul>
<li th:each="node : ${nodelist}">
<span th:text="${node.path}" class="treeelement">Town hall</span>
<div class="tooltip">
Logging configuration:
<br/><br/>
<select>
<option value="trace">Trace</option>
<option value="debug">Debug</option>
<option value="info">Info</option>
<option value="warn">Warn</option>
<option value="error">Error</option>
</select>
</div>
<div th:with="nodelist = ${node.children}" th:include="this::submenu" th:remove="tag"></div>
</li>
</ul>
</div>
</div>
JavaScript:
// jsTree
$(function () {
// 6 create an instance when the DOM is ready
$('#jstree_demo_div').jstree();
// 7 bind to events triggered on the tree
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
console.log(data.selected);
});
// 8 interact with the tree - either way is OK
$('button').on('click', function () {
$('#jstree_demo_div').jstree(true).select_node('child_node_1');
$('#jstree_demo_div').jstree('select_node', 'child_node_1');
$.jstree.reference('#jstree_demo_div').select_node('child_node_1');
});
});
// qTip2
$(function(){
$('.treeelement').each(function(){
$(this).qtip({
content: {
text: $(this).next('.tooltip')
},
show: 'click',
hide: {
fixed: true,
delay: 2000
}
});
});
});

Answer 1

I made it work I guess, check this: JS Fiddle.
Try to:
move your qtip binding into loaded jsTree event to be sure it is loaded before you start binding qtip;
bind to jstree-ancor class the jsTree node has
you do not need to iterate with each
The reason for your tooltip having no text is that when building the tree jsTree rebuilds your <li> elements leaving out your .tooltip divs.

Answer 2

I found a way which suits better my needs, here is a JSFiddle example.
First I register the method nodeSelected to be executed when a node is selected, then I create and show the tooltip. This allows me to assign a specific ID to <select>.
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
nodeSelected(data);
})
...
function nodeSelected(data){
console.log(data.selected);
// Using getElementById since JQuery does not work well with dots in identifiers
$(document.getElementById(data.selected + '_anchor')).qtip({
content: {
text: 'Logging configuration:<br/><br/><select><option value="TRACE">Trace</option><option value="DEBUG">Debug</option><option value="INFO">Info</option></select></div>
},
show: 'click',
hide: {
fixed: true,
delay: 1000
}
});
$(document.getElementById(data.selected + '_anchor')).qtip("show");
}