Tooltips in DataTable


Topic: Tooltips in DataTable

scottwilliams pro premium priority asked 9 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 {
                    ...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 9 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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