How to call custom javascript after the table is loaded?

[dhimmel]

I'd like to create header tooltips with tippy.js.

I've defined a python function like:

def _format_header(ci: reactable.HeaderCellInfo) -> htmltools.Tag | str:
    column_id = ci.name
    column_name = ci.value
    return htmltools.tags.span(column_name, data_tippy_content="My description")

This is creating an HTML span appropriate for tippy.js and if I run the following in the browser console after the table loads, I see my header tooltips:

tippy('[data-tippy-content]');

But how do we instruct the javascript to only run this tippy command after the table is loaded? Is there a convenience function for this?

I tried the following but it is still too eager:

window.addEventListener('DOMContentLoaded', function() {
  console.log('Loading header tooltips');
  tippy('[data-tippy-content]');
});

[dhimmel]

@machow any insights here?