Popover in 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;
});