Topic: Tooltips Disappear when using DataTables

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


kpienkowska staff answered 2 months ago


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


yorkmyers priority commented 2 months ago

Perfect, thank you so much!!


yorkmyers priority answered 2 months ago


Here's a snippet

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

Thank you!


kpienkowska staff answered 2 months 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

  • User: 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