Topic: Tooltips in DataTable

scottwilliams priority asked 1 month 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 {
                    ...row,
                    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 1 month 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.

FREE CONSULTATION

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

Status

Answered

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