Popover {{::sample }}:

{{::showPopover}}

Show Tip Show Quote
    

{{::code}}

pipPopover.show({ class: 'pip-tip', locals: { title: $scope.title, content: $scope.content }, cancelCallback: function () { console.log('backdrop clicked'); }, controller: function($scope, $timeout) { $scope.title = $scope.locals.title; $scope.content = $scope.locals.content; $scope.image = 'https://static.pexels.com/photos/204262/pexels-photo-204262-large.jpeg'; $scope.onNextClick = function () { console.log('on next click'); pipPopoverService.hide(); }; $timeout(function() { $('.pip-popover').find('.pip-pic').css('background-image', 'url(' + $scope.image + ')'); }, 200); }, template: '<div class="pip-title text-subhead2" style="margin: 24px 24px 16px 24px;"> + {{ titleSample }}</div>' + '<div class="pip-content pip-popover-content" style="padding: 0px 24px; margin-bottom: 64px;">' + '<div class="pip-pic" style="margin-bottom: 16px;"></div> + {{ contentSample }}</div>' + '<div class="pip-popover-footer layout-row layout-align-start-center" style="padding: 8px 16px 8px 24px; ">' + '<div class="flex"></div><md-button ng-click="onNextClick()">NEXT</md-button></div>' });

{{::code}}

    pipPopover.show({
        responsive: false,
        element: $event.currentTarget,
        class: 'pip-help',
        locals: {
        content: content || $scope.content
        },
        cancelCallback: function () {
            console.log('backdrop clicked');
        },
        controller: function($scope) {
            $scope.content = $scope.locals.content;

            $scope.onNextClick = function () {
                console.log('on next click');
                pipPopoverService.hide();
            };
        },
        template: '<div class="pip-title" style="height: 24px;"></div><div class="pip-content pip-popover-content" style="padding: 0px 24px;">'
        + '{{ contentSample }}</div><div style="height: 24px;"></div>'
    });