1

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.. :-) )

Community
  • 1
  • 1
Philipp
  • 795
  • 1
  • 8
  • 22

1 Answers1

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

gyantasaurus
  • 447
  • 2
  • 9