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

gyantasaurus · Accepted Answer · 2015-09-10 02:56:03Z

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

answered Sep 10, 2015 at 2:56

gyantasaurus

4472 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Bootstrap Popover custom trigger

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related