JSFiddle - React, Tailwind, and code Playground

HTML

<span id="test" data-tooltip-content="x">Help 1</span>
<span data-tooltip-content="x">Help 1</span>
<span data-tooltip-content="y">Help 2</span>
<span data-tooltip-content="y">Help 2</span>

<div style="display:none" data-tooltip-content-id="x">
  Shared content for <b>help 1</b>
</div>

<div style="display:none" data-tooltip-content-id="y">
  <table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>

JavaScript

$(function() {
	  (function() {
	    var cache = {};
	    $.widget("custom.tooltipContent", $.ui.tooltip, {
	      _init: function() {
	        this._super();

	        this.options.content = function() {
	          return $(this).attr("title");
	        };

	        this.element.attr("title", function() {
	          var contentId = $(this).attr("data-tooltip-content");

	          if (!cache[contentId]) {
	            cache[contentId] = $("[data-tooltip-content-id=" + contentId + "]").remove().html();
	          }

	          return cache[contentId];
	        });
	      }
	    });
	  })();
	});

	$(function() {
	  $("span").tooltipContent({
	    show: {
	      effect: "slideDown",
	      delay: 50
	    }
	  })
	});