How to apply css styles to Popover using onBeforeShow() of Angular-strap

Please let me know about applying CSS(left) styles using onBeforeShow() event of Angular-strap Popover lib.

Basically, I want to reduce the left position of the pop-over by 50-100px in order to show it in the middle(at least closer) of the element, not just at the corner.

You can use this example or folk it - http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview

I appreciate our help.

Solution

angular strap popover make use of tooltip module internally. And if you're using $popover service by creating directive of popover then you've to handle event on tooltip. So what you need is:

$scope.$on('tooltip.show.before', function(){
    alert('The popover onBeforeShow state');
    //$('.popover').css('left','100px')
});

But it seems at this event popover element is not yet created on dom so not able to change its style from controller (If you want to change style by changing its configuration then it's correct event). But tooltip.show event does what you need (from controller function). on this event you can have functionality to change css of popover element.

Plunker example: https://plnkr.co/edit/eSzNE95yBjegzYSTdFRE?p=preview

(Transition may not be clean but you can handle that with little bit slow animation.)

P.S. You can make use of all these events for handling popover: tooltip.show.before, tooltip.show, tooltip.hide.before, tooltip.hide,