Topic: DataTable Popovers
Expected behavior
When hovering over the info icon, the popover should appear
Actual behavior
When icon is in a DataTable, this does not work
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/lewis-stancerucukltd-com/3338511
You have to initialize it in JS then.
https://mdbootstrap.com/snippets/standard/m-duszak/3342364#js-tab-view
const popoverEl = document.getElementById('popover')
const popover = new mdb.Popover(popoverEl)
Lewis priority commented 2 years ago
tooltip.js:572
Uncaught TypeError: Cannot read properties of undefined (reading 'closest')
at r.value (tooltip.js:572)
at new r (tooltip.js:144)
at r.<anonymous> (mdb.min.js:310)
at new r (mdb.min.js:310)
at r.<anonymous> (mdb.min.js:310)
at new r (popover.js:32)
Lewis priority commented 2 years ago
I have multiple popover icons in the table which I assume breaks it unless I am missing something else
Lewis priority commented 2 years ago
Just found this code and this seems to work. Thank you var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-mdb-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new mdb.Popover(popoverTriggerEl) })
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Laptop
- Browser: Chromium Edge
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Lewis priority commented 2 years ago
I have duplicated the Icon outside of the DataTable for testing
Michał Duszak staff commented 2 years ago
Seems like the icon is missing in the snippet code.
Lewis priority commented 2 years ago
Sorry I have updated the snippet now