@chakra-ui/tooltip

What is @chakra-ui/tooltip?

@chakra-ui/tooltip is a component library for creating tooltips in React applications. It provides a simple and customizable way to add tooltips to your UI elements, enhancing user experience by providing additional information on hover or focus.

What are @chakra-ui/tooltip's main functionalities?

Basic Tooltip

This feature allows you to create a basic tooltip that appears when the user hovers over or focuses on the target element.

```jsx
import { Tooltip } from '@chakra-ui/react';

function BasicTooltip() {
  return (
    <Tooltip label="Hello, World!">
      <span>Hover over me</span>
    </Tooltip>
  );
}
```

Custom Tooltip Placement

This feature allows you to customize the placement of the tooltip. You can place it at the top, right, bottom, or left of the target element.

```jsx
import { Tooltip } from '@chakra-ui/react';

function CustomPlacementTooltip() {
  return (
    <Tooltip label="Hello, World!" placement="right">
      <span>Hover over me</span>
    </Tooltip>
  );
}
```

Tooltip with Delay

This feature allows you to add a delay before the tooltip appears and disappears, providing a smoother user experience.

```jsx
import { Tooltip } from '@chakra-ui/react';

function DelayedTooltip() {
  return (
    <Tooltip label="Hello, World!" openDelay={500} closeDelay={500}>
      <span>Hover over me</span>
    </Tooltip>
  );
}
```

Custom Tooltip Styling

This feature allows you to customize the styling of the tooltip, including background color, text color, and font size.

```jsx
import { Tooltip } from '@chakra-ui/react';

function StyledTooltip() {
  return (
    <Tooltip label="Hello, World!" bg="teal.500" color="white" fontSize="md">
      <span>Hover over me</span>
    </Tooltip>
  );
}
```

Other packages similar to @chakra-ui/tooltip

react-tooltip

react-tooltip is a popular library for adding tooltips to React applications. It offers a wide range of customization options and supports various tooltip positions. Compared to @chakra-ui/tooltip, react-tooltip provides more advanced features like multiline tooltips and custom events.

tippy.js

tippy.js is a highly customizable tooltip and popover library for React. It offers extensive configuration options and supports animations, themes, and interactive tooltips. While @chakra-ui/tooltip is more focused on simplicity and ease of use, tippy.js provides more flexibility and advanced features.

material-ui

Material-UI is a popular React UI framework that includes a Tooltip component. It follows Google's Material Design guidelines and offers a wide range of UI components. The Tooltip component in Material-UI is similar to @chakra-ui/tooltip but is part of a larger UI framework, making it suitable for projects that require a comprehensive set of UI components.

README

Tooltip

Use this component to display extra information about an element by displaying a floating description.

Installation

yarn add @chakra-ui/tooltip

# or

npm i @chakra-ui/tooltip

Import components

import { Tooltip } from "@chakra-ui/react"

Usage

If the children of Tooltip is a string, we wrap with in a span with tabIndex set to 0, to ensure it meets the accessibility requirements.

<Tooltip label="Hey, I'm here!">Hover me</Tooltip>