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>

This shows how you create the table. Where is the code which initializes tippy after the table is created? — cloned, Sep 03 '22 at 10:53

score 1 · Accepted Answer · answered Sep 03 '22 at 17:35

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>

Absolutely spot on! And I never would have found on my own. Thank you sharing your talents. — verlager, Sep 04 '22 at 08:50

How can I make Tippy tooltip work in table?

1 Answers1