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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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