ツールチップ

要素がキーボードフォーカスを受け取るか、マウスがその上にホバーしたときに、要素に関する情報を表示するポップアップ。

import React from 'react';
import * as Tooltip from '@radix-ui/react-tooltip';
import { PlusIcon } from '@radix-ui/react-icons';
import './styles.css';

const TooltipDemo = () => {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="IconButton">
            <PlusIcon />
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content className="TooltipContent" sideOffset={5}>
            Add to library
            <Tooltip.Arrow className="TooltipArrow" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  );
};

export default TooltipDemo;

機能

表示遅延をグローバルに制御するためのプロバイダー。

トリガーにフォーカスまたはホバーすると開きます。

トリガーがアクティブになった場合、またはEscapeキーを押すと閉じます。

カスタムタイミングをサポートします。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-tooltip

構成

すべての部品をインポートして組み立てる。

import * as Tooltip from '@radix-ui/react-tooltip';

export default () => (
  <Tooltip.Provider>
    <Tooltip.Root>
      <Tooltip.Trigger />
      <Tooltip.Portal>
        <Tooltip.Content>
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  </Tooltip.Provider>
);

APIリファレンス

プロバイダー

ツールチップにグローバルな機能を提供するためにアプリケーションをラップします。

プロパティ	型	デフォルト
`delayDuration`	`数値`	`700`
`skipDelayDuration`	`数値`	`300`
`disableHoverableContent`	`ブール値`	デフォルト値なし

ルート

ツールチップのすべての部品を含みます。

プロパティ	型	デフォルト
`defaultOpen`	`ブール値`	デフォルト値なし
`open`	`ブール値`	デフォルト値なし
`onOpenChange`	`関数`	デフォルト値なし
`delayDuration`	`数値`	`700`
`disableHoverableContent`	`ブール値`	デフォルト値なし

トリガー

ツールチップを切り替えるボタン。デフォルトでは、Tooltip.Contentはトリガーに対して自身を配置します。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"closed" \|"delayed-open" \|"instant-open"`

ポータル

使用すると、コンテンツ部分をbodyにポータルします。

プロパティ	型	デフォルト
`forceMount`	`ブール値`	デフォルト値なし
`container`	`HTMLElement`	`document.body`

コンテンツ

ツールチップが開いているときに表示されるコンポーネント。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`aria-label`	`文字列`	デフォルト値なし
`onEscapeKeyDown`	`関数`	デフォルト値なし
`onPointerDownOutside`	`関数`	デフォルト値なし
`forceMount`	`ブール値`	デフォルト値なし
`side`	`列挙型`	`"top"`
`sideOffset`	`数値`	`0`
`align`	`列挙型`	`"center"`
`alignOffset`	`数値`	`0`
`avoidCollisions`	`ブール値`	`true`
`collisionBoundary`	`境界`	`[]`
`collisionPadding`	`数値 \| パディング`	`0`
`arrowPadding`	`数値`	`0`
`sticky`	`列挙型`	`"partial"`
`hideWhenDetached`	`ブール値`	`false`

データ属性	値
`[data-state]`	`"closed" \|"delayed-open" \|"instant-open"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`

CSS変数	説明
`--radix-tooltip-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`
`--radix-tooltip-content-available-width`	トリガーと境界のエッジ間の残りの幅
`--radix-tooltip-content-available-height`	トリガーと境界のエッジ間の残りの高さ
`--radix-tooltip-trigger-width`	トリガーの幅
`--radix-tooltip-trigger-height`	トリガーの高さ

矢印

ツールチップと一緒にレンダリングするためのオプションの矢印要素。これを使用して、トリガーとTooltip.Contentの視覚的なリンクを支援できます。Tooltip.Content内でレンダリングする必要があります。

プロパティ	型	デフォルト
`asChild`	`ブール値`	`false`
`幅`	`数値`	`10`
`高さ`	`数値`	`5`

例

グローバルに設定する

Providerを使用して、delayDurationとskipDelayDurationをグローバルに制御します。

import * as Tooltip from '@radix-ui/react-tooltip';

export default () => (
  <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
    <Tooltip.Root>
      <Tooltip.Trigger>…</Tooltip.Trigger>
      <Tooltip.Content>…</Tooltip.Content>
    </Tooltip.Root>
    <Tooltip.Root>
      <Tooltip.Trigger>…</Tooltip.Trigger>
      <Tooltip.Content>…</Tooltip.Content>
    </Tooltip.Root>
  </Tooltip.Provider>
);

すぐに表示する

delayDurationプロパティを使用して、ツールチップが開くまでの時間を制御します。

import * as Tooltip from '@radix-ui/react-tooltip';

export default () => (
  <Tooltip.Root delayDuration={0}>
    <Tooltip.Trigger>…</Tooltip.Trigger>
    <Tooltip.Content>…</Tooltip.Content>
  </Tooltip.Root>
);

コンテンツサイズを制限する

コンテンツの幅をトリガーの幅に合わせるように制約したい場合や、高さをビューポートを超えないように制約したい場合があります。

これをサポートするために、--radix-tooltip-trigger-widthや--radix-tooltip-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。これらを使用して、コンテンツの寸法を制約してください。

// index.jsx
import * as Tooltip from '@radix-ui/react-tooltip';
import './styles.css';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>…</Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content className="TooltipContent" sideOffset={5}>
        …
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
);

/* styles.css */
.TooltipContent {
  width: var(--radix-tooltip-trigger-width);
  max-height: var(--radix-tooltip-content-available-height);
}

起点認識アニメーション

CSSカスタムプロパティ--radix-tooltip-content-transform-originを公開しています。side、sideOffset、align、alignOffset、および衝突に基づいて、計算された起点からコンテンツをアニメーション化するために使用します。

// index.jsx
import * as Tooltip from '@radix-ui/react-tooltip';
import './styles.css';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>…</Tooltip.Trigger>
    <Tooltip.Content className="TooltipContent">…</Tooltip.Content>
  </Tooltip.Root>
);

/* styles.css */
.TooltipContent {
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

衝突認識アニメーション

data-side属性とdata-align属性を公開しています。これらの値は、実行時に衝突を反映するように変化します。これらを使用して、衝突と方向を認識するアニメーションを作成します。

// index.jsx
import * as Tooltip from '@radix-ui/react-tooltip';
import './styles.css';

export default () => (
  <Tooltip.Root>
    <Tooltip.Trigger>…</Tooltip.Trigger>
    <Tooltip.Content className="TooltipContent">…</Tooltip.Content>
  </Tooltip.Root>
);

/* styles.css */
.TooltipContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.TooltipContent[data-side='top'] {
  animation-name: slideUp;
}
.TooltipContent[data-side='bottom'] {
  animation-name: slideDown;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アクセシビリティ

キーボード操作

キー	説明
`Tab`	ツールチップを開閉します（遅延なし）。
`Space`	開いている場合は、ツールチップを遅延なしで閉じます。
`Enter`	開いている場合は、ツールチップを遅延なしで閉じます。
`Escape`	開いている場合は、ツールチップを遅延なしで閉じます。

カスタムAPI

プリミティブな部分を独自のコンポーネントに抽象化することで、独自のAPIを作成します。

部分の抽象化とcontentプロパティの導入

この例では、Tooltipのすべての部分を抽象化し、新しいcontentプロパティを導入しています。

使用方法

import { Tooltip } from './your-tooltip';

export default () => (
  <Tooltip content="Tooltip content">
    <button>Tooltip trigger</button>
  </Tooltip>
);

実装

asChildプロパティを使用して、トリガー部分をスロット可能な領域に変換します。これにより、トリガーが渡された子に置き換えられます。

// your-tooltip.jsx
import React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';

export function Tooltip({
  children,
  content,
  open,
  defaultOpen,
  onOpenChange,
  ...props
}) {
  return (
    <TooltipPrimitive.Root
      open={open}
      defaultOpen={defaultOpen}
      onOpenChange={onOpenChange}
    >
      <TooltipPrimitive.Trigger asChild>
        {children}
      </TooltipPrimitive.Trigger>
      <TooltipPrimitive.Content side="top" align="center" {...props}>
        {content}
        <TooltipPrimitive.Arrow width={11} height={5} />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Root>
  );
}

前へツールバー

次へアクセシブルアイコン

GitHubでこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

機能

使用方法

実装