How can I make Tippy tooltip work in table?

Question

I can't use tooltipster or tippy.js tooltips in my table. It's a cryptic table with technical data and working tooltips would be a big help. The table below works fine, except that the Tippy tooltips don't display anything, regardless of where the tooltip js is placed (td or input). And the tooltips work fine in regular html elsewhere on the page.

Am I out of luck and stuck with using browser title assignment ?

<div id = 'wrapper'></div>

items = "";

items += '<table>';

for (let i = 1; i <= 48; i++) {

items += '<tr>';

// ENTRANCE FEE 
items += `<td data-tippy-content = "EF">
<input maxlength = "2" id = "E${i}" /></td>`;

items += '</tr>';
}

items += '</table>';

document.getElementById("wrapper")innerHTML = items;



<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>tippy('[data-tippy-content]');</script>

Answer 1

You need to call tippy('[data-tippy-content]'); again after innerHTML gets new value.

  var items = "";

  items += '<table>';

  for (let i = 1; i <= 4; i++) {

    items += '<tr>';
    // ENTRANCE FEE 
    items += `<td data-tippy-content="EF" ><input maxlength="2" id="E${i}" /></td>`;
    items += '</tr>';
  }

  items += '</table>';

  document.getElementById("wrapper").innerHTML = items;
  
  tippy('[data-tippy-content]');

<div id='wrapper'></div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
  tippy('[data-tippy-content]');
</script>