Popover

@component-controls/components

3.4.5

Popover container that is triggered by a click/hover event, using react-popper-tooltip.

Component

browse

docs

issues

import { Popover } from '@component-controls/components';

browse

docs

issues

({ placement, trigger }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Popover
      trigger={trigger}
      placement={placement}
      tooltipShown={isOpen}
      onVisibilityChange={isVisible => {
        setIsOpen(isVisible);
      }}
      tooltip={() => (
        <Box>
          <Donut value={1 / 2} />
        </Box>
      )}
    >
      <Button variant="secondary">Click to open</Button>
    </Popover>
  );
}

Controls

Name	Description	Default	Controls
placement	Tooltip placement w.r.t. trigger autoauto-startauto-endtopbottomrightlefttop-starttop-endbottom-startbottom-endright-startright-endleft-startleft-end	bottom
trigger	Event that triggers the tooltip Trigger	hover

Properties

	Name	Description	Default
PopoverOwnProps (1 properties)

	arrowVisible	set to false to hide the arrow boolean	true
TooltipTriggerProps (16 properties)

External dependencies

package	imports	peer
@theme-ui/css ^0.6.0-alpha.7	get	*
react ^17.0.1	ReactFC	*
react-popper-tooltip ^3.1.0	TooltipTrigger
react-popper-tooltip/dist/types ^3.1.0	TooltipTriggerPropsChildrenArg
theme-ui ^0.6.0-alpha.7	ColorModesScale