Topic: Tooltips Disappear when using DataTables

yorkmyers priority asked 2 years 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 2 years ago


I've updated your snippet to demonstrate how you can reinitiate tooltip: https://mdbootstrap.com/snippets/standard/kpienkowska/4209327


yorkmyers priority commented 2 years ago

Perfect, thank you so much!!


yorkmyers priority answered 2 years ago


Here's a snippet

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

Thank you!


Kamila Pieńkowska staff answered 2 years 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.

FREE CONSULTATION

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

Status

Resolved

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