jstree inline JSON demo

by Rishi Kumar

HTML

<link rel="stylesheet" href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css">
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div id="container"></div>


<a tabindex="0" data-html="true" title="<div>Basic information</div>" data-toggle="popover" data-content="<div>Some content</div>" data-trigger="focus"><i class="icon-info-sign"></i></a>

JavaScript

$('#container').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node", "children" : [
                { "text" : 'Child node 1 <a tabindex="0" data-html="true" title="<div>Basic information</div>" data-toggle="popover" data-content="<div>Some content</div>" data-trigger="click"><i class="icon-info-sign"></i></a>' },
                { "text" : 'Child node 2 <a tabindex="0" data-html="true" title="<div>Basic information</div>" data-toggle="popover" data-content="<div>Some content</div>" data-trigger="click"><i class="icon-info-sign"></i></a>' }
            ]
            },
        ]
    }
}).on('open_node.jstree', function (e, data) {
   $('[data-toggle="popover"]').popover();
});