Tooltip

Tooltips display informative text when users hover over, or tap an element.

Triggers on Hover

Displays the tooltip when users hover over the anchor element. This behaviour is the default behaviour of the tooltips.

Hover me!

Triggers on Click

Displays the tooltip when users click on the anchor element.

Click me!

Triggers on MouseMove

When mouse enters the anchor element, the tooltip will be displayed and follows the cursor.

Tickle me!

Arrow Tails

You can use the tailed property to give your tooltip an arrow tail indicating which element it refers to.

Tailed tooltip!

Controlled Tooltips

You can use the open, onOpen and onClose properties to control the behaviour of the tooltip.

uncontrolled

controlled

Placement

You can use placement property to change the tooltip's placement.

Placement

top

left

right

bottom

Placement (top)

API

Learn more about the properties and the customization points.

Usage

import Tooltip from "@sonnat/ui/Tooltip";

//or
import { Tooltip } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Tooltip Properties
Name	Type	Default	Description
children required	node	-	The target element. This element works as an anchor for the tooltip.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
text required	string	-	The text content of the tooltip.
placement	"left" \| "right" \| "top" \| "bottom"	-	The tooltip's placement. It will be auto updated when `autoPlacement={true}`
triggersOn	"click" \| "hover" \| "mouseMove"	-	The source of the event that will trigger the tooltip. Note: Choosing `"mouseMove"` will disable `autoPlacement` property.
autoPlacement	boolean	false	By enabling this option, tooltip chooses the placement automatically (the one with the most space available) and ignores the `placement` property value.
tailed	boolean	false	If `true`, the tooltip will have an arrow tail.
open	boolean	-	If `true`, the tooltip will be open.
defaultOpen	boolean	-	If `true`, the tooltip will be open on mount. Use when the component is not controlled.
onOutsideClick	function	-	The callback fires when user has clicked outside of the tooltip. Signature: `function(event: MouseEvent) => void`
onOpen	function	-	The callback fires when the component requests to be opened. Signature: `function(event: React.SyntheticEvent \| Event) => void`
onClose	function	-	The callback fires when the component requests to be closed. Signature: `function(event: React.SyntheticEvent \| Event) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.