CODEWITHSUNDEEP
javascriptjqueryangularjsclickpopover
john Smith
john Smith

Reputation: 1605

angular bootstrap popover hide after few seconds

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

Upvotes: 5

Views: 4037

Answers (3)

runTarm
runTarm

Reputation: 11547

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

Upvotes: 4

dfsq
dfsq

Reputation: 193291

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:

<li class="pop" popover="popover text goes here" ng-mousedown="mousedown()" popover-trigger="mousedown">
    <a><i class="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

Upvotes: 3

user3482773
user3482773

Reputation:

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

Upvotes: 1

Related Questions