Base Popover
A wrapper for React Popper
#Intro
This component is used as a wrapper for React Popper, which is the official React wrapper for Popper, a tooltip and popover positioning engine.
#Basic Usage
To make the BasePopover work, you need to give it three things: a reference (ref) to the element where the popover should appear, which goes into the anchor prop (make sure this ref is set on the element itself), the content for the popover in the popover prop, and whether the popover should be visible or hidden in the showPopover prop
BasePopover is being used for the following Fancy components:
<BasePopover
popover={<div style={{ backgroundColor: "#eee", padding: 8 }}>popover</div>}
anchor={(ref) => <span ref={ref}>anchor element</span>}
showPopover={true}
/>#Placement
You can set the preferred placement by using any of the following values for the placement prop:
auto auto-start auto-end top bottom right left top-start top-end bottom-start bottom-end right-start right-end left-start left-end
<BasePopover
popover={<div style={{ backgroundColor: "#eee", padding: 8 }}>popover</div>}
anchor={(ref) => <span ref={ref}>anchor element</span>}
showPopover={true}
placement="left"
/>#Offset
You can set the distance in pixels between the anchor and the content by using the offset prop.
<BasePopover
popover={<div style={{ backgroundColor: "#eee", padding: 8 }}>popover</div>}
anchor={(ref) => <span ref={ref}>anchor element</span>}
showPopover={true}
offset={20}
/>#Properties
| Property | Description | Defined | Value |
|---|---|---|---|
anchorRequired | functionThe element from which to spawn the popover. The provided ref must be set on the element. | ||
popoverRequired | | string | number | element | functionThe content of the popover | ||
showPopoverRequired | booleanIs the popover currently shown | ||
placementOptional | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"Preferred placement for the popover | ||
allowedAutoPlacementsOptional | literal-union[]Allowed placements for the popover when using an "auto" value for the "placement" prop | ||
offsetOptional | numberDistance in px between the anchor and popover, defaults to 0 | ||
idOptional | stringOptional ID | ||
updateKeysOptional | unknown[]Key to control updates to the placement of the popover. Provide a different value when an update is desired | ||
booleanSet aria-hidden | |||
strategyOptional | "absolute" | "fixed"Position popover using fixed or absolute | ||
zIndexOptional | numberOverride z-index value (1500) specified in SCSS |