Tooltip | Zalify UI

React

Usage

import { Tooltip } from '@zalify-ui/react'

<Tooltip content="This is the tooltip content">
  <button>Hover me</button>
</Tooltip>

Examples

Arrow

Use the showArrow prop to show an arrow on the tooltip.

React

Placement

Use the positioning.placement prop to change the position of the tooltip.

React

Offset

Use the positioning.offset prop to change the offset of the tooltip.

React

Delay

Use the openDelay and closeDelay prop to change the delay of the tooltip.

React

Custom Background

Use the --tooltip-bg CSS variable to change the background color of the tooltip.

React

Controlled

Use the open and onOpenChange prop to control the visibility of the tooltip.

React

Interactive

Use the interactive prop to keep the tooltip open when interacting with its content.

React

Disabled

Use the disabled prop to disable the tooltip. When disabled, the tooltip will not be shown.

React

With Avatar

Here's an example of how to use the Tooltip component with an Avatar component.

React

With Switch

Here's an example of how to wrap Tooltip around a Switch component.

Switch with tooltip

React

Props

Root

Prop	Default	Type
`closeDelay`	`150`	`number` The close delay of the tooltip.
`closeOnClick`	`true`	`boolean` Whether the tooltip should close on click
`closeOnEscape`	`true`	`boolean` Whether to close the tooltip when the Escape key is pressed.
`closeOnPointerDown`	`true`	`boolean` Whether to close the tooltip on pointerdown.
`closeOnScroll`	`true`	`boolean` Whether the tooltip should close on scroll
`interactive`	`false`	`boolean` Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openDelay`	`400`	`number` The open delay of the tooltip.
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`aria-label`		`string` Custom label for the tooltip.
`defaultOpen`		`boolean` The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip.
`disabled`		`boolean` Whether the tooltip is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string; content: string; arrow: string; positioner: string }>` The ids of the elements in the tooltip. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the tooltip is opened.
`open`		`boolean` The controlled open state of the tooltip
`positioning`		`PositioningOptions` The user provided options used to position the popover content
`present`		`boolean` Whether the node is present (controlled by the user)