Topic: Popover with Hover Can't be Dismissed if Element is Removed
Reproducible here:
https://dl.dropboxusercontent.com/u/421021/popover%20bug.gif
If you have a link with a hoverable popover, and the element get's removed while you're reading the popover, you can't get rid of the popover! This is common in MVVM setups (Knockout, Kendo, Angular, etc) where changing the underlying data can add/remove elements from the DOM. It should monitor when the corresponding element is destroyed and remove the tooltip or something like that.
Add comment
Thank you for information and solution. We appreciate your contribution .
I see that you're just re-using the popover widget from the Bootstrap framework so I found the documentation there on how to destroy a popover. The tricky part is to register the "destroyed" event and then destroy the corresponding popover during the event like this:
// setup the destroyed event so we can bind to it and know when a DOM element is removed
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler()
}
}
};
var popoverElements = $('[data-toggle="popover"]');
popoverElements.popover({ animation: true, delay: { show: 100, hide: 100 } });
for (var i = 0; i < popoverElements.length; i++) {
var element = popoverElements[i];
popoverElements.on("destroyed", function() {
var destroyedElement = element;
$(destroyedElement).popover("destroy");
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags