JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>


<div class="tooltip" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div draggable="true" onmousedown="clicking(event)" ondragstart="drag(event)" id="drag1" width="88" height="31" ondragend="dragend(event)"
  onmousedown="mouseDown();">
  <span id="mainContent">Hover over me</span>
  <span class="tooltiptext" id="ttt">Tooltip text</span>
  </div>
</div>

CSS

.tooltip {
    position: relative;
    display: inline-block;
    border: 1px dotted black;
    padding:10px;
    color: black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    height: auto;
    opacity: 90;
}

JavaScript

window.mouseDown = function(id){
    document.getElementById('ttt').style.visibility="hidden";
}

window.allowDrop = function(ev) {
    ev.preventDefault();
}

window.drag = function(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

window.dragend = function(ev) {
    console.log('drag ending');
    var tooltip = $('#ttt');
    tooltip.css('display', 'block');
    tooltip.css('height', 'auto');
}

window.drop = function(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

window.clicking = function(ev) {
  var tooltip = $('#ttt');
  tooltip.css('display', 'none');
  tooltip.css('height', '0');
}