Popover component

Same question here. This feature would be great! :smiley:

@max @ben can we get an update?

would love to see the popover component.

Look what I found:


1 Like

@pbernasconi you beat us to it!

Here’s a lil’ popover demo: http://codepen.io/ionic/pen/GpCst

Give the nightly build a shot and let us know if you find any issues

1 Like

Hey y’all,

I know it’s been long overdue… but we finally got this one out. Here’s the blog post, it’s part of the latest Beta11 release!

Let us know what you think. :smile:


Nice to finally see it in. Looks great!

This is definitely awesome! Using it in my app as soon as it came out.

Did have a question. It seems that it has a pre-defined height. Are there plans to make it resize to fit its contents? or should we just set the height ourselves when we have a couple of items?

Thanks again guys!

I’m dealing with the same issue. Just updated to the beta11 from the 9th and found it out.
For now, i’m fixing it by editing the css file, since sass --watch is not working for me.

Just search for this on www/lib/ionic/css/ionic.css

  .popover {
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 10;
  display: block;
  margin-left: -110px;
  margin-top: 12px;
  height: 280px;
  width: 220px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  opacity: 0; }

and try to get the best size on the height property. In my case it was
height: 11.4em;

It will become a problem when i’ll need to add different popover menus on different views. Hope to have a fix soon.

1 Like

I have the same issue on the height, this is definitely a must fix

awesome, thanks for the tip!

Hi, is this supposed to work from a tab (bottom of screen)? I added in a test popup using this example http://codepen.io/ionic/pen/GpCst and clicking the tab just displays “Learn Iconic” - the other 4 items are truncated.

Android 4.2 and Chrome on Mac

Excellent! Would love to see this be aware of its location on the screen and reverse its direction, for example, when used from a button that is in a footer bar.

@JustinCredible You can do that with a little bit of css.
<style>.popover{ margin-top : XXpx } </style> <ion-popover-view>...</ion-popover-view>

Check in the ionic.css file in the library folder because you’ll see that the margin-top value depends on platforms, so you’ll see something like ‘’:

.platform-android .popover {   background-color: #fafafa;   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);   margin-top: -32px; }

In fact you can do almost everything if you’re good to manipulate CSS.

I don’t know if that helps but I tried.

Thanks, but I don’t see how that will help me. I’m interested in having a button in the footer of the view and having the popover pop-up at the bottom of the screen that pops upwards. I certainly could hack it with CSS, but then it would only work for a specific screen size when the button is at a specific location. Ideally the component would be aware of the button that triggered it, where its location was and do a calculation to determine if showing downward would cause it to display off of the screen. Alternatively a flag that controlled the direction of the popover would also work.

I’m not sure to understand what you want to do. All I know is that the popover pop-up under the element that triggered it. You just have to set the position with css in the popover.html file and so the position will be defined for this popover only.
Now I let professionals answer you, I think I reached my limit.


I tried to put ng-clicks that call functions in the $scope, or variables inside curlybraces, or ng-model from inside controls but the $scope seems to be unreachable from inside the popover. (Example here : http://codepen.io/anon/pen/DhlfK )

Can you advise ?

I would like to have the popovers appear under the clicked element (I assumed this is how it normally works). However, all my popovers have the following css:

.popover {
position: absolute;
top: 25%;
left: 50%;

I believe the top and left need to be pixel positions that are based on the parent or previous element. What am I doing wrong?

In my case I need to make the popover appear aligned left or right from the clicked element.

How can I change the position?

Thank you.

Hi Adam, Does this popover functionality landed in ionic2? As I don’t see any documentation and want to use in one of my app.