Toggle Tip

Setup

For ease of use, create a closed component composition for the ToggleTip component.

Alternatively, you can add it to your project using the following command.

npx @chakra-ui/cli snippet add toggle-tip

The snippet includes a closed component composition for the Popover component.

Usage

import { InfoTip, ToggleTip } from "@/components/ui/toggle-tip"

<ToggleTip content="...">
  <button />
</ToggleTip>

Examples

Info Tip

Use the InfoTip component to display an info tip. This component renders an icon button with an info icon by default.

Useful for landing pages to display additional information about a feature.

Props

Root