Angular Bootstrap Popover Hide After Few Seconds

This is my html code:

Solution 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

Solution 2:

The only way you can do it I can think of is a little weird, but working. Add ngMousedown handler to your LI element and define a handler for it in controller:

<liclass="pop"popover="popover text goes here"ng-mousedown="mousedown()"popover-trigger="mousedown"><a><iclass="icon-link"></i> Link</a></li>

Controller:

$scope.mousedown = function() {
    var tooltipScope = this;
    $timeout(function() {
        tooltipScope.tt_isOpen = false;
    }, 2000);
};

The idea is that AngularUI's popover uses $tooltip service internally, which defined a bunch of internal properties in the scope of the element. One of those properties is tt_isOpen. If you set it to false tooltip will hide.

Demo: http://plnkr.co/edit/T1Uouba0MU2vtcwuRPt9?p=preview

Solution 3:

the simplest way is to create a variable that is a boolean, and give it a True/False values, and if you clicked on the pop-up a method will be called throw the controller and will be a timeout that flips the variable to a False. This variable will be used in the tag "ng-show" to show and hide.

Best Regards