Popover

The alignment and arrow on your popover can be set with the anchorPosition prop. These positions will not update based upon screen real estate and will stick to the positions you declare. Because of this, be careful when using left or right positioning.

Some tips:

• The first word in the anchorPosition denotes where the popover will appear relative to the button.
• The second word in the anchorPosition denotes where the gravity / pin position will appear relative to the popover.

Popovers often have need for titling. This can be applied through a prop or used separately as its own component EuiPopoverTitle nested somewhere in the child prop.

You can also add a similiarly styled EuiPopoverFooter for smaller captions or call to action buttons.

When using popover titles, you can still propogate the padding size by using panelPaddingSize. This will only affect the horizontal padding of the title and the overall padding of the content.

EuiPopover can accept a React or DOM element as a container prop and restrict the popover from overflowing that container.

EuiWrappingPopover is an extra popover component that allows any existing DOM element to be passed as the button prop.

Popover content even works on position: fixed; elements.

Popover anchors default to display: inline-block so they do not force block display on inline triggers. If you do need to change this to block display, just add display="block"

EuiInputPopover is a specialized popover component intended to be used with form elements. Stylistically, the popover panel is"attached" to the input. Functionally, consumers have control over what events open and close the popover, and it can allow for natural tab order.

Although some assumptions are made about keyboard behavior, consumers should provide specific key event handlers depending on the use case. For instance, a type=text input could use the down key to trigger popover opening, but this interaction would not be appropriate for type=number inputs as they natively bind to the down key.