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