Tooltip

Quick start

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

Importing Component

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

Code Snippets and Examples

Basic Tooltip

<div className="App">
  <Tooltip withArrow label="Basic Tooltip">
    <Button>Click To Open </Button>
  </Tooltip>
</div>

Controlled Tooltip

const [isOpened, setIsOpened] = useState(false);
<div className="App">
  <Tooltip
    position="right"
    withArrow
    isOpened={isOpened}
    label="Controlled Tooltip"
  >
    <Button
      onMouseEnter={() => setIsOpened(true)}
      onMouseLeave={() => setIsOpened(false)}
    >
      Click To Open
    </Button>
  </Tooltip>
</div>;

MultiLine Tooltip

<div className="App">
  <Tooltip multiLine withArrow label="This is a multiLine Tooltip">
    <Button>Click To Open </Button>
  </Tooltip>
</div>

Target Width

<div className="App">
  <Tooltip
    width="target"
    multiLine
    withArrow
    label="Width matches the target Width"
  >
    <Button>Click To Open </Button>
  </Tooltip>
</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
label	JSX.Element		No
isOpened	boolean controlled value	false	Yes
offset	string distance between Tooltip and Target element	4px	Yes
borderRadius	string	4px	Yes
width	string	fit-label	Yes
withArrow	boolean	false	Yes
arrowSize	string	7px	Yes
onChange	(isOpened)=>void	()=>{}	Yes
zIndex	string	1	Yes
color	string	#2C2E33	Yes
multiLine	boolean	false	Yes
labelColor	string	white	Yes

Keyboard Controls

Key	Action
Space | Enter	Toggle Opened State
Tab	Navigate