Popover from tabs

Hi there.

Im using TabView navigation with the Ion-tabs widget. I would like launch a popover containing a view from clicking on a tab, not a button like in the example code pen. (http://codepen.io/ionic/pen/GpCst) … Is this possible ? I tried ng-click to launch a popover thats in scope, but no luck.

I have one launched via a tab

   <ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" ng-click="openPopover($event)">
    <ion-nav-view name="tab-home"></ion-nav-view>

However, I am having issues whereby only the top of the popover is visible, see my post at the end of Popover component

Hey there, What you could do it like this

But note, we’re working on adjusting the popover’s position if it’s towards the bottom.

So using you example I guess I could just call popover.show() inside the HomeTabCtrl controller. How do I pass it a reference to the Tab so the popup is anchored from the controller? Do I just use a css selector on “tab-item-active” or something?

Lastly, is there an issue number/ticket against the positioning issue for popups launched via tab items? My UX guys are really keen on displaying tab views inside the popover widget.

Thanks for the input.

No, you can’t just call popover.show(), $event needs to passed so that way you can position itself appropriately, as per the docs


Displaying tabs inside the popover? I’d avoid that, as it can be really confusing on where you are supposed to navigate. If you need something similar, but follow a more favorable UX, look at something like ui-segmented-control in ios.

1 Like

I’m having a similar issue with the popover not anchoring to the correct view. I can tell that it’s initiating but I can’t get the popover to show from within a tab view. I played with the z-index of the popover wrapper but it didn’t seem to fix the issue. Is it a issue with chrome? I’m testing on a android device with default chrome browser. The CodePen example also seems to have the same issue when in Chrome? I would like to use $ionicPopOver instead of $ionicModal because of my UI design. Note I’m not using the ion-tabs directive but the tabs css classes. I’ll go back to $ionicModal for now because I don’t have the time to solve this issue but it would be nice for the future.

Neve mind I solved the issue. $event was getting mutated somewhere along the line and I resolved the issue.