Popover

Quick start

Here's a quick start guide to get started with the Popover component

Importing Component

import { Popover } from "@hover-design/react";

Code Snippets and Examples

Basic Popover

const content = <div>Basic Popover</div>;

<div className="App">
  <Popover withArrow content={content}>
    <Button>Click To Open </Button>
  </Popover>
</div>;

Controlled Popover

const [isOpened, setIsOpened] = useState(false);
const content = <div>This is a controlled Popover</div>;

<div className="App">
  <Popover position="right" withArrow isOpened={isOpened} content={content}>
    <Button
      onMouseEnter={() => setIsOpened(true)}
      onMouseLeave={() => setIsOpened(false)}
    >
      Click To Open
    </Button>
  </Popover>
</div>;

Target Width

const content = <div>Width matches the target Width</div>;

<div className="App">
  <Popover width="target" withArrow content={content}>
    <Button>Click To Open </Button>
  </Popover>
</div>;

Trap Focus

const styles = {
  width: "100%"
};
const content = (
  <div>
    <label>Name: </label>
    <input style={styles} type="text" />
    <label>Password: </label>
    <input style={styles} type="password" />
  </div>
);

<div className="App">
  <Popover width="200px" position="right" trapFocus withArrow content={content}>
    <Button>Click To Open </Button>
  </Popover>
</div>;

Props Reference

Attributes	Values	Default Value	Optional ?
position	"bottom" | "left" | "right" | "top" | "bottom-end"| "bottom-start"| "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"	bottom	Yes
content	JSX.Element		No
isOpened	boolean controlled value	false	Yes
offset	string distance between Popover and Target element	4px	Yes
borderRadius	string	4px	Yes
width	string	fit-content	Yes
withArrow	boolean	false	Yes
arrowSize	string	7px	Yes
onChange	(isOpened)=>void	()=>{}	Yes
zIndex	string	1	Yes
trapFocus	boolean	false	Yes

Keyboard Controls

Key	Action
Space | Enter	Toggle Opened State
Tab	Navigate