JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbraak.github.io/jqTree/tree.jquery.js"></script>
<link rel="stylesheet" href="http://mbraak.github.io/jqTree/jqtree.css">
<script src="http://mbraak.github.io/jqTree/jqtree-circle.png"></script>
<div id="tree1"></div>
<div id="dialog" style="display: none;">
    Rename: <input id="name" type="text" maxlength="40" title="i am tooltip"/>
    <button id="save">Save</button>
</div>

JavaScript

var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1',
             children: [
                { label: 'sub-child1' }
            ]
            },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];

$(function() {
    $('#tree1').tree({
        data: data,
        dragAndDrop: true,
        onCanMove: function(node) {
            if (!node.parent.parent) {
                return false;
            } 
            else {
                return true;
            }
        },
        onCanMoveTo: function(moved_node, target_node, position) {
           if(position == 'inside' && target_node !== moved_node.parent.parent && target_node.getLevel() < moved_node.getLevel()) {
                return true;
            } 
            else {
                return false;
            }
        }
    });
});

$('#tree1').find('.jqtree_common').tooltip({
        show: {
            effect: 'slidedown',
            delay: 300
        },
        content: function() {
            $('<div>').append("hello");
        },
        items: '*'
    });

$('input').tooltip();
$('#tree1').on("click",function() {    
    var node = $('#tree1').tree('getSelectedNode');
    $('#dialog').show();
    $('#name').val(node.name);
    $('#save').on('click', function() {
        var node = $('#tree1').tree('getSelectedNode');
        console.log($('input').val());
        $('#tree1').tree('updateNode', node, $('input').val());
    });
    
});