JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css">
<div id="jstree_demo_div"></div>

CSS

.qtip {
    
}

JavaScript

var data = [
     { "id" : "root2", "parent" : "#", "type" : "catRoot", "text" : "Root2" },
     { "id" : "root", "parent" : "#", "type" : "catRoot", "text" : "Root", "state": { "opened": true } },
     { "id" : "cat1", "parent" : "root", "type" : "tree", "text" : "First Branch" },
     { "id" : "cat2", "parent" : "root", "type" : "tree", "text" : "Second Branch"},
     { "id" : "cat3", "parent" : "root", "type" : "tree", "text" : "Third Branch" },
     { "id" : "cat01", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "type" : "tree", "text" : "Cat 0.1.2" },
     { "id" : "cat11", "parent" : "cat2", "type" : "tree", "text" : "Cat 1.1.0" },
     { "id" : "cat12", "parent" : "cat2", "type" : "tree", "text" : "Cat 1.1.1", "state":{"selected":true}  },
     { "id" : "cat13", "parent" : "cat2", "type" : "tree", "text" : "Cat 1.1.2" },
     { "id" : "cat21", "parent" : "cat3", "type" : "tree", "text" : "Cat 2.1.0" },
     { "id" : "cat22", "parent" : "cat3", "type" : "tree", "text" : "Cat 2.1.1" },
     { "id" : "cat23", "parent" : "cat3", "type" : "tree", "text" : "Cat 2.1.2" },    
     { "id" : "root3", "parent" : "#", "type" : "catRoot", "text" : "Root3" }
]



$.jstree.defaults.core = {};
$('#jstree_demo_div')
    .on('ready.jstree', function(e, data) {
         $('.jstree-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: 2000
            }
        });   	
	})
    .on("after_open.jstree", function (e, data) {
         $('#'+data.node.id+' .jstree-anchor').qtip({
            content: {
                text: 'Logging...