Topic: Tooltips Disappear when using DataTables

yorkmyers priority asked 1 year ago

I have a tooltip in a datatable which works only when the page first loads.

However any change made to the data table (ex sorting or searching) causes the tooltip to disappear.

I tried re-initializing the tooltip (code below) but that didn't work.

function reinitializeToolTips(){

const tooltips = document.querySelectorAll('[data-mdb-toggle="tooltip"]')
tooltips.forEach((tooltip) => {
    const tooltipInstance = new mdb.Tooltip(tooltip);


Is there a way to ensure the tooltips can automatically be re-enabled (re-initialized) after a change is made to the table?

Thank you

Kamila Pieńkowska staff answered 1 year ago

I've updated your snippet to demonstrate how you can reinitiate tooltip:

yorkmyers priority commented 1 year ago

Perfect, thank you so much!!

yorkmyers priority answered 1 year ago

Here's a snippet

Can you please provide code to watch for a datatable render?

Thank you!

Kamila Pieńkowska staff answered 1 year ago

I am not sure what you use the tooltip for so I am not sure how can I help. Can you show your current datatable in snippet?

For now, I can only say that if initializing works at first you can watch when datatable render and after every event render initiate tooltip.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No