Tip

Tip is a component that displays supplementary information with a built-in icon trigger.

煉獄杏寿郎

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

Usage

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

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

import { Tip } from "@workspaces/ui"

<Tip />

Change Status

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

Help

Info

Success

Warning

Error

<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

Help

Info

Success

Warning

Error

<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).

煉獄杏寿郎

<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).

Delay Open 1000ms

Delay Close 1000ms

<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].

煉獄杏寿郎

<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".

Scale

Block End

Inline Start

Inline End

Block Start

<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".

Start

Start Start

Start End

Start Center

End

End Start

End End

End Center

Center Start

Center End

<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.

煉獄杏寿郎

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

Always Open

To always show the tooltip, set open to true.

煉獄杏寿郎

<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.

煉獄杏寿郎

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

Control

煉獄杏寿郎

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

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

If you use this code, you need to add "use client" to the top of the file.

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`).