AngularJS Bootstrap Popover custom trigger

Question

In my WebApp I want to show a customized popover that will be triggered when a variable in my controller is set. To achieve this I've created a custom trigger event and set it with $tooltipProvider.setTriggers({"showChat": "hideChat"}]

Here is a plnkr.co of my code that does not working.

I also checked other solutions here on StackOverflow (like AngularJS Bootstrap Tooltip - trigger on event or Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?) that seem to work, but I can't figure out where my code is wrong. I assume it's just a little thing (like always.. :-) )

Answer 1

Angular-bootstrap seems to use addEventListener to subscribe to this event, which means you cannot trigger it with .trigger(), what you'll need is dispatchEvent:

if(scope.showPopover) {
  console.log('trigger showChat')
  element.get(0).dispatchEvent(new Event("showChat"));
} else {
  console.log('trigger hideChat')
  element.get(0).dispatchEvent(new Event("hideChat"));
}

See in this fixed plunker.

Btw: unless you do something more complicated in your app, you can simply use popover-is-open="showPopover" to trigger the popover, like in this plunker