Adding qTip2 tooltips to each node of a 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
            }
        });
    });
});

Nikolay Ermakov · Accepted Answer · 2015-11-21T21:53:22.820

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.

edited Nov 21 '15 at 21:53

answered Nov 21 '15 at 21:45

Nikolay Ermakov

5,031
2
11
18

Thanks for your reply! Having to wait until the nodes are loaded would make a lot of sense. I tried by using the "onloaded.jstree" as you suggest but unfortunately got the same result, only root nodes ([this question](http://stackoverflow.com/questions/11452205/how-can-i-tell-if-jstree-has-fully-loaded) talks about that too). Should the nodes Cat x.x.x of your example show tooltips too? I checked jsTree docu and saw... "**loaded.jstree**:triggered after the root node is loaded for the first time.", "**ready.jstree**:triggered after all nodes are finished loading." Got the same even with ready. – DiegoSahagun Nov 23 '15 at 16:39
I guess `ready` is a better place to call qTip binding. I also added same to `after_open` event so the children (Cat.x.x.x) of the just opened node get tooltips too - child `
` elements do not exist in the DOM until the parent node is opened (better of course move adding tips into a separate function and call from jsTree events to avoid code duplication). I updated same Fiddle.

Nikolay Ermakov

Nov 23 '15 at 21:03

I will mark this as the answer since it actually solved (or provided a workaround) to my problem. I still think there should be a neater way. Thanks! – DiegoSahagun Nov 24 '15 at 15:39

score 0 · Answer 2 · answered Nov 26 '15 at 10:18

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");
}

Adding qTip2 tooltips to each node of a jsTree

2 Answers2