---
title: Tip
description: "`Tip` is a component that displays supplementary information with a built-in icon trigger."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/tip
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-tip--basic
---

```tsx
<HStack gap="xs">
  <Text as="span" whiteSpace="nowrap">
    煉獄杏寿郎
  </Text>
  <Tip content="俺は俺の責務を全うする!!" />
</HStack>
```

## Usage

```tsx
import { Tip } from "@yamada-ui/react"
```

```tsx
import { Tip } from "@/components/ui"
```

```tsx
import { Tip } from "@workspaces/ui"
```

```tsx
<Tip />
```

### Change Status

To change the status, set `status` to `"help"`, `"info"`, etc. The default is `"help"`.

```tsx
<VStack>
  <For each={["help", "info", "success", "warning", "error"]}>
    {(status) => (
      <HStack key={status} gap="xs">
        <Text as="span" whiteSpace="nowrap">
          {toTitleCase(status)}
        </Text>
        <Tip content="俺は俺の責務を全うする!!" status={status} />
      </HStack>
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["help", "info", "success", "warning", "error"]}>
    {(status) => (
      <HStack key={status} gap="xs">
        <Text as="span" whiteSpace="nowrap">
          {toTitleCase(status)}
        </Text>
        <Tip
          colorScheme={status === "help" ? "mono" : status}
          content="俺は俺の責務を全うする!!"
          status={status}
        />
      </HStack>
    )}
  </For>
</VStack>
```

### Change Duration

To change the duration, set `duration` to a number (seconds).

```tsx
<HStack gap="xs">
  <Text as="span" whiteSpace="nowrap">
    煉獄杏寿郎
  </Text>
  <Tip content="俺は俺の責務を全うする!!" duration={0.7} />
</HStack>
```

### Add Delay

To delay showing or hiding, set `openDelay` or `closeDelay` to a number (milliseconds).

```tsx
<VStack>
  <HStack gap="xs">
    <Text as="span" whiteSpace="nowrap">
      Delay Open 1000ms
    </Text>
    <Tip content="俺は俺の責務を全うする!!" openDelay={1000} />
  </HStack>

  <HStack gap="xs">
    <Text as="span" whiteSpace="nowrap">
      Delay Close 1000ms
    </Text>
    <Tip content="俺は俺の責務を全うする!!" closeDelay={1000} />
  </HStack>
</VStack>
```

### Change Offset

To change the offset, set `gutter` or `offset` values.

`gutter` sets the simple distance from the element, and `offset` sets `[horizontal, vertical]`.

```tsx
<VStack>
  <HStack gap="xs">
    <Text as="span" whiteSpace="nowrap">
      煉獄杏寿郎
    </Text>
    <Tip content="俺は俺の責務を全うする!!" gutter={32} />
  </HStack>

  <HStack gap="xs">
    <Text as="span" whiteSpace="nowrap">
      煉獄杏寿郎
    </Text>
    <Tip content="俺は俺の責務を全うする!!" offset={[16, 16]} />
  </HStack>
</VStack>
```

### Change Animation

To change the show or hide animation, set `animationScheme` to `"scale"`, `"block-end"`, etc. The default is `"scale"`.

```tsx
<VStack>
  <For
    each={["scale", "block-end", "inline-start", "inline-end", "block-start"]}
  >
    {(animationScheme) => (
      <HStack key={animationScheme} gap="xs">
        <Text as="span" whiteSpace="nowrap">
          {toTitleCase(animationScheme)}
        </Text>
        <Tip
          animationScheme={animationScheme}
          content="俺は俺の責務を全うする!!"
        />
      </HStack>
    )}
  </For>
</VStack>
```

### Change Placement

To change the placement, set `placement` to `"end"`, `"center-start"`, etc. The default is `"start"`.

```tsx
<VStack>
  <For
    each={[
      "start",
      "start-start",
      "start-end",
      "start-center",
      "end",
      "end-start",
      "end-end",
      "end-center",
      "center-start",
      "center-end",
    ]}
  >
    {(placement) => (
      <HStack key={placement} gap="xs">
        <Text as="span" whiteSpace="nowrap">
          {toTitleCase(placement)}
        </Text>
        <Tip content="俺は俺の責務を全うする!!" placement={placement} />
      </HStack>
    )}
  </For>
</VStack>
```

### Disable

To disable the tooltip, set `disabled` to `true`.

```tsx
<HStack gap="xs">
  <Text as="span" whiteSpace="nowrap">
    煉獄杏寿郎
  </Text>
  <Tip content="俺は俺の責務を全うする!!" disabled />
</HStack>
```

### Always Open

To always show the tooltip, set `open` to `true`.

```tsx
<HStack gap="xs">
  <Text as="span" whiteSpace="nowrap">
    煉獄杏寿郎
  </Text>
  <Tip content="俺は俺の責務を全うする!!" open />
</HStack>
```

### Customize Icon

To customize the icon, set `icon` to an icon element.

```tsx
<HStack gap="xs">
  <Text as="span" whiteSpace="nowrap">
    煉獄杏寿郎
  </Text>
  <Tip content="俺は俺の責務を全うする!!" icon={<MessageCircleWarningIcon />} />
</HStack>
```

### Control

```tsx
const { open, onClose, onOpen } = useDisclosure()

return (
  <HStack gap="xs">
    <Text as="span" whiteSpace="nowrap">
      煉獄杏寿郎
    </Text>
    <Tip
      content="俺は俺の責務を全うする!!"
      open={open}
      onClose={onClose}
      onOpen={onOpen}
    />
  </HStack>
)
```

## Uses Components & Hooks

<Uses name="tip" />

## Props

| Prop                   | Default      | Type                                                                                                                                                                                                                                                                                                                                    | Description                                                                                                                                                                                    |
| ---------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as`                   | -            | `As`                                                                                                                                                                                                                                                                                                                                    | The HTML element to render.                                                                                                                                                                    |
| `asChild`              | -            | `boolean`                                                                                                                                                                                                                                                                                                                               | Merges its props onto its immediate child.                                                                                                                                                     |
| `css`                  | -            | `CSSObject \| CSSObject[]`                                                                                                                                                                                                                                                                                                              | The CSS object.                                                                                                                                                                                |
| `colorScheme`          | -            | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                                                                                                                                                                               | Set color scheme variables.                                                                                                                                                                    |
| `size`                 | -            | `"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                                                                                                                                                                                | The size of the component.                                                                                                                                                                     |
| `variant`              | -            | `"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...`                                                                                                                                                                                                                                                                          | The variant of the component.                                                                                                                                                                  |
| `active`               | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the button is represented as active.                                                                                                                                                |
| `animationScheme`      | `"scale"`    | `"scale" \| "none" \| SimplePlacement`                                                                                                                                                                                                                                                                                                  | The animation of the element.                                                                                                                                                                  |
| `autoUpdate`           | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, automatically updates the position of the floating element when necessary.                                                                                                          |
| `closeDelay`           | `100`        | `number`                                                                                                                                                                                                                                                                                                                                | The delay before hiding the tooltip.                                                                                                                                                           |
| `closeOnClick`         | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the tooltip will hide on click.                                                                                                                                                     |
| `closeOnEsc`           | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the tooltip will hide on pressing Esc key.                                                                                                                                          |
| `closeOnScroll`        | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the tooltip will hide on scroll.                                                                                                                                                    |
| `content`              | -            | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`                                                                                                                                                                            | The content of the tooltip.                                                                                                                                                                    |
| `contentProps`         | -            | `HTMLMotionProps`                                                                                                                                                                                                                                                                                                                       | Props for content element.                                                                                                                                                                     |
| `defaultOpen`          | -            | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the element will be initially opened.                                                                                                                                               |
| `disabled`             | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the tooltip will be disabled.                                                                                                                                                       |
| `disableRipple`        | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, disable ripple effects when pressing a element.                                                                                                                                     |
| `duration`             | `0.1`        | `number \| MotionLifecycleProps<number>`                                                                                                                                                                                                                                                                                                | The animation duration.                                                                                                                                                                        |
| `elements`             | -            | `{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }`                                                                                                                                                                                                                                   | Object containing the reference and floating elements.                                                                                                                                         |
| `flip`                 | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.                                                                                        |
| `gutter`               | `8`          | `number`                                                                                                                                                                                                                                                                                                                                | The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.                                                                                 |
| `icon`                 | -            | `string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`                                                                                                                                                                            | The icon to be used in the button.                                                                                                                                                             |
| `loading`              | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the loading state of the button is represented.                                                                                                                                     |
| `matchWidth`           | `false`      | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.                                                 |
| `middleware`           | -            | `(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` | Array of middleware objects to modify the positioning or provide data for rendering.                                                                                                           |
| `offset`               | -            | `[number, number]`                                                                                                                                                                                                                                                                                                                      | The main and cross-axis offset to displace popper element from its reference element.                                                                                                          |
| `onClose`              | -            | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                                                           | Callback invoked to close the element.                                                                                                                                                         |
| `onOpen`               | -            | `() => void \| Promise<void>`                                                                                                                                                                                                                                                                                                           | Callback invoked to open the element.                                                                                                                                                          |
| `open`                 | -            | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, the element will be opened.                                                                                                                                                         |
| `openDelay`            | `400`        | `number`                                                                                                                                                                                                                                                                                                                                | The delay before showing the tooltip.                                                                                                                                                          |
| `placement`            | `"start"`    | `Direction`                                                                                                                                                                                                                                                                                                                             | The placement of the popper relative to its reference.                                                                                                                                         |
| `platform`             | -            | `Platform`                                                                                                                                                                                                                                                                                                                              | Custom or extended platform object.                                                                                                                                                            |
| `portalProps`          | -            | `Omit<PortalProps, "children">`                                                                                                                                                                                                                                                                                                         | Props for portal component.                                                                                                                                                                    |
| `preventOverflow`      | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.                                                                                        |
| `status`               | `"help"`     | `TipStatusScheme`                                                                                                                                                                                                                                                                                                                       | The status of the tip.                                                                                                                                                                         |
| `strategy`             | `"absolute"` | `Strategy`                                                                                                                                                                                                                                                                                                                              | The CSS positioning strategy to use.                                                                                                                                                           |
| `transform`            | `true`       | `boolean`                                                                                                                                                                                                                                                                                                                               | Whether to use `transform` for positioning instead of `top` and `left` (layout) in the `floatingStyles` object.                                                                                |
| `type`                 | `"button"`   | `"button" \| "reset" \| "submit"`                                                                                                                                                                                                                                                                                                       | The type of button. Accepts `button`, `reset`, or `submit`.                                                                                                                                    |
| `whileElementsMounted` | -            | `(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void`                                                                                                                                                                                                                                               | A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`). |