Tip

Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。

煉獄杏寿郎

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

使い方

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

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

import { Tip } from "@workspaces/ui"

<Tip />

ステータスを変更する

ステータスを変更する場合は、statusに"help"や"info"などを指定します。デフォルトでは"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>

カラースキームを変更する

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>

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

煉獄杏寿郎

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

遅延させる

表示または非表示を遅延させる場合は、openDelayまたはcloseDelayに数値(ミリ秒)を設定します。

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>

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

煉獄杏寿郎

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

アニメーションを変更する

表示または非表示のアニメーションを変更する場合は、animationSchemeに"scale"や"block-end"などを設定します。デフォルトでは、"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>

配置を変更する

配置を変更する場合は、placementに"end"や"center-start"などを設定します。デフォルトでは、"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>

無効にする

ツールチップを無効にする場合は、disabledをtrueに設定します。

煉獄杏寿郎

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

常に表示する

ツールチップを常に表示する場合は、openをtrueに設定します。

煉獄杏寿郎

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

アイコンをカスタマイズする

アイコンをカスタマイズする場合は、iconにアイコンを設定します。

煉獄杏寿郎

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

制御する

煉獄杏寿郎

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

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`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`).

類似のコンポーネント

Snacksは、フォームなどで使用される通知を制御するコンポーネントです。

Alertは、ユーザーに情報を伝達するコンポーネントです。

Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。

EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。

使用しているコンポーネント・フック

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Statusは、プロセスまたは状態のステータスを示すコンポーネントです。

Tooltipは、要素の補足など短い情報を表示するコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。