Popover
Popover provides containers to create overlays like tooltips, calenders etc. It represents the UI element as floating above the normal flow creating the "pop out" effect. Popover can contain a range of elements from simple strings to complex React designs.
Popover requires a target element which acts as a pivot for the content. Popover supports multiple placement positions using which <Popover/>
element can be positioned next to the target element in any direction.
Note: React ref should be forwarded to the underlying element, in case the target is a React component.
Usage
import React from "react"
import Popover from "@asphalt-react/popover"
const App = () => (
<Popover target={<Button>Click Me</Button>}>
<p>
Hello there!!
</p>
</Popover>
)
export default App
Accessibility
- Pressing Esc key or clicking anywhere outside the popover closes it.
- Popover traps focus within its content, rotating the focus among its interactive elements.
- The first interactive element receives focus when Popover opens (unless
smartFocus
is set to false)
Props
children
React node to render inside Popover
type | required | default |
---|---|---|
node | true | N/A |
target
Target node that triggers the Popover
type | required | default |
---|---|---|
element | true | N/A |
placement
Placement of the Popover with respect to target node
Popover supports multiple placements:
-
auto
•auto-start
•auto-end
-
top
•top-start
•top-end
-
bottom
•bottom-start
•bottom-end
-
left
•left-start
•left-end
-
right
•right-start
•right-end
type | required | default |
---|---|---|
enum | false | "bottom" |
smartFocus
Adds focus to first interactive element when Popover is visible. It's enabled by default for better accessibility
from v1.3.0+
type | required | default |
---|---|---|
bool | false | true |
skipBounds
When Popover is added to a container with position: fixed
and/or overflow: hidden
,
it creates a containing block with a stacking context which the Popover can't skip.
In such senarios, enabling skipBounds
will force Popover to skip its parent's boundaries.
from v1.3.0+
type | required | default |
---|---|---|
bool | false | false |
onOpen
Callback to notify that Popover is open. The callback has the argument of the shape:
{
event: React synthetic event
}
type | required | default |
---|---|---|
func | false | N/A |
onClose
Callback to notify that Popover is close. The callback has the argument of the shape:
{
event: React synthetic event
}
type | required | default |
---|---|---|
func | false | N/A |