CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
andresmijares
andresmijares

Reputation: 3744

trigger angular.ui popover on event but on click

is it possible to trigger the popover directive on an event? I'm trying to look for a string character and trigger a custom template, however, I cannot find a way to get my way around it, I only see custom attributes attached to a button.

Upvotes: 0

Views: 1088

Answers (1)

masa
masa

Reputation: 2800

You can use popover-is-open to display the popover on a given event.

Here is an example, where a timeout is used to simulate an event that shows the popover:

Markup:

<div ng-controller="PopoverDemoCtrl as vm">
    Wait for 3 seconds for the event to happen...
    <div uib-popover="Read the message!"
         popover-title="Hello World!"
         popover-placement="bottom"
         id="popover"
         class="btn btn-default spaced"
         popover-is-open="vm.showPopover">
        Popover
    </div>
</div>

JavaScript:

function PopoverDemoCtrl($timeout) {
    var popoverDemoCtrl = this;

    popoverDemoCtrl.showPopover = false;
    $timeout(function () {
        popoverDemoCtrl.showPopover = true;
    }, 3000);
}

PopoverDemoCtrl.$inject = ['$timeout'];

angular
    .module('myApp', ['ui.bootstrap'])
    .controller('PopoverDemoCtrl', PopoverDemoCtrl);

The full Fiddle: http://jsfiddle.net/masa671/gtgqof2k/

Upvotes: 2

Related Questions