Topic: Tooltips in DataTable
scottwilliams pro premium priority asked 11 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 10 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