# Ionic Popover * * * ## $ionicPopover $ionicPopover is a view box that floats over app content. It can achieve the following features: * Display additional information on the current page. * Select tools or configurations. * Provide an action list on the page. ### Methods fromTemplate(templateString, options) or fromTemplateUrl(templateUrl, options) Parameters: templateString: Template string. templateUrl: URL of the template to load. options: Initialization options. ## Example ## HTML Code Part

Open popover

My popover title

Hello! ## fromTemplateUrl Method angular.module('ionicApp', ['ionic']) .controller('AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){ $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {scope: $scope}); // .fromTemplateUrl() Method $ionicPopover.fromTemplateUrl('my-popover.html', {scope: $scope}).then(function(popover){ $scope.popover = popover; }); $scope.openPopover = function($event){ $scope.popover.show($event); }; $scope.closePopover = function(){ $scope.popover.hide(); }; // Dismiss popover $scope.$on('$destroy', function(){ $scope.popover.remove(); }); // Execute after hiding popover $scope.$on('popover.hidden', function(){// Execute code}); // Execute after removing popover $scope.$on('popover.removed', function(){// Execute code}); }]) [Try it Yourself »](#) We can also treat the template as a string and use the .fromTemplate() method to implement the popup: ## fromTemplate Method angular.module('ionicApp', ['ionic']) .controller('AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){ $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {scope: $scope}); // .fromTemplate() Method var template = '

My popover title

Hello! '; $scope.popover = $ionicPopover.fromTemplate(template, {scope: $scope}); $scope.openPopover = function($event){ $scope.popover.show($event); }; $scope.closePopover = function(){ $scope.popover.hide(); }; // Dismiss popover $scope.$on('$destroy', function(){ $scope.popover.remove(); }); // Execute after hiding popover $scope.$on('popover.hidden', function(){// Execute code}); // Execute after removing popover $scope.$on('popover.removed', function(){// Execute code}); }]) [Try it Yourself »](#)