<p>

  Upon page load, the tooltip appears in the pencil icon (black background, white text).

</p>

<p>

  As soon as you sort on a column, the tooltip disappears (goes to browser default).

</p>

<div id="datatable" data-mdb-loading="true"></div>

​

const columns = [

  { label: 'Username', field: 'username' },

  { label: 'Website', field: 'website' },

  { label: 'Actions', field: 'actions', sort: false },

];

​

const asyncTable = new mdb.Datatable(

  document.getElementById('datatable'),

  { columns, },

  { loading: true }

);

​

fetch('https://jsonplaceholder.typicode.com/users')

  .then((response) => response.json())

  .then((data) => {

    asyncTable.update(

      {

        rows: data.map((user) => ({

          ...user,

          address: `${user.address.city}, ${user.address.street}`,

          company: user.company.name,

          actions: `

          <a href="#" onClick="titleAddEditOpenModal(${user.company.name});"><i class="fa-solid fa-pencil" data-mdb-toggle="tooltip" title="Edit"></i></a>

        `,

        })),

      },

      { loading: false }

    );

  reinitializeToolTips();

  });

​

​

function reinitializeToolTips(){

  const tooltips = document.querySelectorAll('[data-mdb-toggle="tooltip"]')

  tooltips.forEach((tooltip) => {

    const tooltipInstance = new mdb.Tooltip(tooltip);

  });

}

​

document.addEventListener('render.mdb.datatable', ()=>{

  reinitializeToolTips();

})