@asphalt-react/popover v1.23.0

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
      style={{
        width: "400px",
        backgroundColor: "#fff",
        padding: "1rem",
        margin: 0
      }}
    >
        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

target

Target node that triggers the Popover

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

smartFocus

Adds focus to first interactive element when Popover is visible. It's enabled by default for better accessibility

from v1.3.0+

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+

onOpen

Callback to notify that Popover is open. The callback has the argument of the shape:

{
  event: React synthetic event
}

onClose

Callback to notify that Popover is close. The callback has the argument of the shape:

{
  event: React synthetic event
}