Topic: trailing icons and popover or tooltip

MarcRohrer free asked 2 years ago


how can I get the trailing icon in an edit to respond to a click event? I want to launch a popover or tooltip from that, but the event is ignored.


MarcRohrer free answered 2 years ago


Hello,

of course, the formOutline elemets are initialized!

The code works as in the example. But there must be some kind of other initialization for the popovers. There is no event listener for them in the examples.

But I cannot figure out, how this could be done...

Marc


Dawid Wajszczuk staff commented 2 years ago

Hi. Have you tired something like this for popovers?

const popoverEl = document.getElementById('my-popover')
const popover = new mdb.Popover(popoverEl)

(Remember to run this after popovers have been loaded to the page)


Michał Duszak staff answered 2 years ago


Hello, you have to initialize event listener after you load component.

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3654651#js-tab-view

*Note: snippet contains just an example of how dynamic content COULD have been loaded and properly initialized. But always beware of using innerHTML because of its vulnerabilities.*


MarcRohrer free answered 2 years ago


Hi,

unfortunalely, it does not work. The pointer changes to an arrow, but clicking has no effect.

My html is dynamically loaded, so I suspect, some form of initialization should happen. What exactly is needed?

regards

M. Rohrer


Michał Duszak staff answered 2 years ago


Hello, you have to add following CSS to enable clicking on trailing icon.

.trailing {
  cursor: default;
  pointer-events: auto !important;
}

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3649451#html-tab-view



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No