JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span class="toolTipHTML" data_ttcontent="tt_help1" title="test 1">Help 1</span>
<span class="toolTipHTML" data_ttcontent="tt_help2" title="test 2">Help 2</span>

<hr>

<div class="tt_help1_content">
   Text for Help 1 goes here!<br>
   Lorem<br>
   Ipsum
</div>

<div class="tt_help2_content">
   Text for Help 2 goes here!
</div>

CSS

.ui-helper-hidden {
   display: none;
}

.ui-helper-hidden-accessible {
   border: 1;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

JavaScript

$('.toolTipHTML').tooltip({
  show: { duration: 0 },
  hide: { effect: "fade", duration: 100 },
  position: { my: "left top", at: "left bottom" },
  content: function() {
    return $('.'+$( this ).attr('data_ttcontent')+'_content').html();
  }
});