Topic: Tooltips in DataTable

scottwilliams priority asked 2 months ago

Expected behavior

Tooltips should be visible in a datatable rendered column

Actual behavior

Tooltips are not being initialized when included in a datatable column with a rendered action icon.

Resources (screenshots, code snippets etc.)

I tried:

const tooltipsEl = document.querySelectorAll('[data-mdb-tooltip-init]');
            tooltipsEl.forEach((tooltipsEl) => {
                const tooltip = new mdb.Tooltip(tooltipsEl)

But it is not working.

part of the JSON where I'm defining the rendered column:

...].map((row) => {
                return {
                    articleid: `<a href='#'>${row.articleid}</a>`,
                    casenumber: row.casenumber === "n/a" ? row.casenumber : `<a href='#'>${row.casenumber}</a>`,
                    actions: `<i class="mdi mdi-account-plus mdi-18px lh-1 p-1 pb-0" data-mdb-tooltip-init title="Assign to me"></i>`,

Kamila Pieńkowska staff answered 2 months ago

Yo need to initialize tooltips after every render.mdb.datatable event.

The code you used to do it is correct.

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 7.1.0
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: MacOS Sonoma 14.3
  • Provided sample code: No
  • Provided link: No