JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
first: <span class='marksTooltips' id='first-span-google'>google tooltip</span>
 &nbsp; &nbsp;	
second: <span class='marksTooltips' id='second-span-yahoo'>yahoo tooltip</span>

<div style='visibility:hidden'>
<div id='google-tooltip'>
<span class="popupTooltipClass">first:<a target='_blank' href="http://google.com">google</a></span>
</div>
<div id='yahoo-tooltip'>
    <span  class="popupTooltipClass">second:<a target='_blank' href="http://yahoo.com">yahoo</a></span>
</div>
</div>

CSS

span.popupTooltipClass { font-size : 10px;  }

JavaScript

$(document).ready(function(){
	$("span.marksTooltips").jqxTooltip({
	    autoHide: false,
        autoHideDelay: 0,
        position:'bottom',
        showArrow: false,
        top:-8
	});
    // assign a tooltip span to each element
    $('span#first-span-google').attr('data-tooltip',
            $('div#google-tooltip').html() );
    $('span#second-span-yahoo').attr('data-tooltip',
          $('div#yahoo-tooltip').html()  ) ;
    
	$.each($("span.marksTooltips"), function () {
	    $(this).jqxTooltip({
	        content: $(this).attr('data-tooltip')
	    });
    });
});