Help defining where a Popover shows
I have a horizontal scroll view along the bottom with buttons in it. I want a popover to show over each button, anchored to the top center of each button that was clicked. I can't get the anchor or the popover to show on top of the button. It only seems to want to show to the right of each button. I create the popover and show it inside a click event listener of the button. How do I get the popover to only show above the button and not beside it with the anchor arrow pointing down at the top middle of the button.
button.addEventListener('click', function(e)
{
var popover = Ti.UI.iPad.createPopover({
width:300,
height:250,
title:'Test Popover'
});
popover.show({
view:e.source,
rect:{x:0,y:0,width:300,height:5},
animated:true
});
});
2 Answers
-
Hi there, the view: property on the show() method is the one that sets where the Popover will show up. so in your case you should set view:button
Another interesting thing I would add is the Arrow direction property when you create the Object popover. check the code below:
button.addEventListener('click', function(e) { var popover = Ti.UI.iPad.createPopover({ width:300, height:250, title:'Test Popover', arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_UP }); popover.show({ view:button, animated:true }); });
-
I've also accomplished this with …
popover.show({view: button, top: button.top});