JSFiddle - React, Tailwind, and code Playground

by phrontisteries

HTML

<div class="inthemiddle">

<span class="jsontree_value jsontree_value_string jsonTree_MagicDrawID tooltip" id="_18_5_2_24220535_1548168417632_918901_91233">"_18_5_2_24220535_1548168417632_918901_91233"<span class="tooltiptext"><span>Name: Milestone C<br>Type: uml:InstanceSpecification</span></span></span>

</div>

CSS

.inthemiddle{
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 70px 0;
  text-align: center;
}
.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  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 0.3s;
}

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

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

JavaScript

var addTooltip = function(div,fn){
		var span = div.getElementsByClassName("tooltiptext")[0];
    if(!span){
      span = document.createElement("span");
      span.className = "tooltiptext";
      var text = ""; // we will add to this
      switch(typeof(fn)){
      	case 'string' : text = document.createTextNode(fn); break;
      }
      span.appendChild(text);
      div.appendChild(span);
    }
}