@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

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>

Keywords

FAQs

What is @chakra-ui/tooltip?

Is @chakra-ui/tooltip popular?

Is @chakra-ui/tooltip well maintained?

Package last updated on 19 Apr 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install