angular bootstrap popover hide after few seconds

Question

This is my html code:

<li class="pop" popover="popover text goes here" popover-trigger="mousedown">
    <a><i class="icon-link"></i></a>
</li>

When clicking the icon a popover is opened as expected. Currenly the popover is close only by click on the icon. I wish that the popover will be closed automaticaly after few seconds.

This is my javascript code - which does not work:

$('.pop').popover().click(function () {
   setTimeout(function () {
     $('.pop').popover('hide');
   }, 4000);
}); 

when running

$('.pop').popover()  

on FF debugger I getting:

typeError: undefined is not a function

Please help :)

Answer 1

Inspired by @dfsq's idea about tt_isOpen, you could create a custom directive to do the auto hiding.

.directive('popoverAutoclose', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var timeoutHandle;

      scope.$watch('tt_isOpen', function (isOpen) {
        $timeout.cancel(timeoutHandle);

        if (isOpen) {
          timeoutHandle = $timeout(function () {
            scope.tt_isOpen = false;
          }, +attrs.popoverAutoclose || 5000);
        }
      });
    }
  }
});

And use it like this:

<li class="pop" popover="popover text goes here" popover-autoclose="2000" popover-trigger="mousedown">

Example Plunker: http://plnkr.co/edit/KQKHtz73lFk8Z4g4q6a4?p=preview