Normally, when a popup opens near the edge of the screen, it flips over to open on the opposite side of the anchor, so that it doesn't extend off the screen. For example, if the menu doesn't have room to open downward, it flips to open upward instead; this is a vertical flip. Horizontal flipping doesn't normally happen, since this would cause menus to open in strange places. For arrow popups, however, being able to flip horizontally makes sense. This attribute, set to both, permits that behavior. You will not normally have to use this attribute, since it's automatically applied to arrow panels.
Requires Gecko 24.0
An arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. A sliding panel will have the start (or end) position extended such that the panel can be the requested size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor.
In this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor. Without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor.
Thanks! Please check your inbox to confirm your subscription.
If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
Why does MDN look different?
MDN is changing to focus just on documenting web technologies. All the same great content is still here; we’re just changing some visual elements and navigation, to help you more quickly find the web technology docs you’re looking for.
But don’t worry, MDN and Mozilla are still together! In fact, we're updating MDN’s look to reflect Mozilla's new logo and colors.