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>'
});