Topic: trailing icons and popover or tooltip
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.
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
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
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.*
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 3 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)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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