DataTable Popovers


Topic: DataTable Popovers

Lewis pro premium priority asked 3 years ago

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


Lewis pro premium priority commented 3 years ago

I have duplicated the Icon outside of the DataTable for testing


Michał Duszak staff commented 3 years ago

Seems like the icon is missing in the snippet code.


Lewis pro premium priority commented 3 years ago

Sorry I have updated the snippet now


Michał Duszak staff answered 3 years ago

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 pro premium priority commented 3 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 pro premium priority commented 3 years ago

I have multiple popover icons in the table which I assume breaks it unless I am missing something else


Lewis pro premium priority commented 3 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) })


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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