Popover in ionic framework - ionic-framework

Question

I am trying to create a popup in my ionic view.
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item">
<i class="icon ion-share"></i> Share
</a>
</div>
When i click on Share button , I should get the below template as popup.. not as separate view.
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
How to do it?
Thanks,
Sabarisri

Answer 1

create a share button:
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</div>
put your popover template like this:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
</ion-content>
</ion-popover-view>
</script>
in your controller call the popover like this:
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});