Topic: Popover with Hover Can't be Dismissed if Element is Removed

ijabit free asked 6 years ago

Reproducible here: 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.

Michal Szymanski staff answered 6 years ago

Thank you for information and solution. We appreciate your contribution .

ijabit free answered 6 years ago

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"); }); }

Please insert min. 20 characters.


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


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes