Spaceweb - Popover

content

() => (
  <div style={{ padding: 20 }} >Hello, there! 👋
    <Input placeholder="Focusable Element" />
  </div>
)

() => (
  <div style={{ padding: 20 }} >Hello, there! 👋
    <Input placeholder="Focusable Element" />
  </div>
)

children

{({ isOpen }) => <Button isSelected={isOpen}>Click me</Button>}

{({ isOpen }) => <Button isSelected={isOpen}>Click me</Button>}

placement

auto

Selected auto.

triggerType

click

hover

showArrow

positionFixed

focusLock

returnFocus

renderAll

viewportAsBoundary

onOpen

onClose

repositionOnResize

import * as React from "react";
import { StatefulPopover } from "spaceweb/popover";
import { Input } from "spaceweb/input";
import { Button } from "spaceweb/button";

export default () => {
  return (
    <StatefulPopover
      content={() => (
        <div style={{ padding: 20 }}>
          Hello, there! 👋
          <Input placeholder="Focusable Element" />
        </div>
      )}
    >
      {({ isOpen }) => (
        <Button isSelected={isOpen}>Click me</Button>
      )}
    </StatefulPopover>
  );
}

import * as React from "react";
import { StatefulPopover } from "spaceweb/popover";
import { Input } from "spaceweb/input";
import { Button } from "spaceweb/button";

export default () => {
  return (
    <StatefulPopover
      content={() => (
        <div style={{ padding: 20 }}>
          Hello, there! 👋
          <Input placeholder="Focusable Element" />
        </div>
      )}
    >
      {({ isOpen }) => (
        <Button isSelected={isOpen}>Click me</Button>
      )}
    </StatefulPopover>
  );
}

Popovers provide the container and styles to overlay menus, tooltips, controls or text. They’re visually represented as a layer above other components and objects in a view, and float above a content view after being triggered by a click-event (or hover) such as a button, link, menu or icon. Popovers can contain range of content from simple text strings to inputs, or lightly structured content and imagery/illustration. It’s usage depends on the context.

When to use

Describe the difference between visually similar elements.
Hide information that's irrelevant once the user if familiar with the UI.

Accessibility

Upon opening, focus will be transferred to the first interactive element (unless autofocus is set to false)
The anchor will be focusable and user can tab to it using their keyboard.
When triggerType="hover" focusing on the anchor will open the tooltip automatically
When triggerType="click" a focused tooltip can be triggered via spacebar (assuming the anchor is a button)
Both the escape key and clicking outside the popover will close it
Supports a prop accessibilityType: 'none' | 'menu' | 'tooltip' that defaults to menu
When used as a menu, the anchor will have aria-haspopup="true" aria-expanded="true" aria-controls="popover-id" and the popover will have id="popover-id"
When used as a tooltip, the anchor will have id="jzowpv-anchor" aria-describedby="jzowpv-popover" and the popover will have id="jzowpv-popover" aria-ownedby="jzowpv-anchor" role="tooltip" (note that jzowpv is a random uuid generated at runtime).
When accessibilityType is set to none, nothing will be added so the user can do whatever they wish.

Examples

Always open

Spaceweb will not provide accessibility related prop when custom TargetElement is used. Read Accessibility guideline for popover.

Hover

Anchor ref handling example

Created a wrapper component that renders Checkbox and passes popover's anchor props to the Checkbox's Root element.

Wrapped checkbox with props passed to the wrapper.

Clipping Avoidance

ignoreBoundary

repositionOnResize prop

Reposition on content change

viewportAsBoundary prop

viewportAsBoundary

API

Name	Type	Default	Description
accessibilityType	'none' \| 'menu' \| 'tooltip'	menu	Controls how this popover behaves for screen readers and other assistive devices.
animateOutTime	number		Number of milliseconds used to fade out the popover.
autoFocus	boolean	true	If true, focus will shift to the first interactive element within the popover.
children	react node		The content that will trigger the popover.
content	function		The content of the popover.
focusLock	boolean	false	If true, focus will be locked to the popover contents.
ignoreBoundary	boolean		If true, popover element will overflow outside anchor's scrollParent.
mountNode	object		Defines where to mount the popover.
onBlur	function		Called the onBlur event triggers.
onClose	function		Called when the Popover clsoes.
onEsc	function		Called when ESC keypress triggers.
onFocus	function		Called the onFocus event triggers.
onMouseEnter	function		Called when mouseEnter triggers.
onMouseEnterDelay	number		Number of milliseconds to wait before showing the popover after mouse enters the trigger element.
onMouseLeave	function		Called when mouseLeave triggers.
onMouseLeaveDelay	number		Number of milliseconds to wait before showing the popover after mouse leaves the trigger element.
onOpen	function		Called when the Popover opens.
overrides	custom		Lets you customize all aspects of the component.
placement	'auto' \| 'topLeft' \| 'top' \| 'topRight' \| 'rightTop' \| 'right' \| 'rightBottom' \| 'bottomRight' \| 'bottom' \| 'bottomLeft' \| 'leftBottom' \| 'leftBottom' \| 'leftBottom'	auto	Controls how to position the popover relative to the target.
popperOptions	object		Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults.
positionFixed	boolean	false	uses the position fixed, left and top properties instead of transform to adjust the popover.
renderAll	boolean	false	Renders all popover content for SEO purposes regardless of popover isOpen state.
repositionOnResize	boolean		Reposition popover whenever dimension of popup content or targetElement changes.
returnFocus	boolean	true	If true, focus will shift back to the original element after popover closes. Set this to false if focusing the original element triggers the popover.
showArrow	boolean	false	If true, an arrow will be shown pointing from the popover to the trigger element.
targetElement	react node		By default Popover assumes children to be targetElement. targetElement can be used to provide custom targetElement.
triggerType	'click' \| 'hover'	click	Controls how to position the popover relative to the target.
viewportAsBoundary	boolean	true	By default, popover content will try to render inside scrollParent of target element. If true, content will overflow outside scrollParent but will remain inside viewport. https://popper.js.org/docs/v1/#preventoverflowboundarieselement

You can check the implementation of the component for more details.

You can import this module like so:

import {ANIMATE_IN_TIME} from 'spaceweb/popover'

It exports the following components or utility functions:

ANIMATE_IN_TIME
ANIMATE_OUT_TIME
Popover
STATE_CHANGE_TYPE
StatefulContainer
StatefulPopover
StyledArrow
StyledBody
StyledInner
StyledPadding

🏁
Getting started

📖
Guides

📦
Packages

🖇
Components

📊
Charts

Popover

When to use

Accessibility

Examples

Popover stateless example

Popover opens on Click

Popover with TargetElement

Popover opens on link Click

Popover Opens on Hover

Popover Available Placements

Popover With Arrow

Popover Close from Content

Anchor ref handling example

Clipping Avoidance

repositionOnResize prop

viewportAsBoundary prop

Popover with Overrides

SSR Popover

API

Popover props

Popover exports