JSFiddle - React, Tailwind, and code Playground

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("changed.jstree", function (e, data) {
    	nodeSelected(data);
    })
    .jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    }
 });  

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:...