Tooltip

使用法

ツールチップをレンダリングし、アンカーとなる要素を子として渡します:

import { Tooltip } from '@wordpress/components';
const MyTooltip = () => (
   <Tooltip text="More information">
   <div>Hover for more information</div>
   </Tooltip>
);

ネストされたツールチップ

1つ以上の Tooltip コンポーネントが別の Tooltip コンポーネント内にレンダリングされる場合、ブラウザに表示されるのは最も外側の Tooltip コンポーネントに関連付けられたツールチップのみです。他のネストされた Tooltip コンポーネントは単に何もしない（no-op）で、アンカーを通過させます。

プロパティ

コンポーネントは以下のプロパティを受け入れます:

children: React.ReactElement

ツールチップがアンカーする要素。

注意: 子要素は1つのみ受け入れます。

• 必須: はい

delay: number

ツールチップを表示する前に待機するミリ秒単位の時間。

• 必須: いいえ
• デフォルト: 700

hideOnClick: boolean

アンカーがクリックされたときにツールチップを隠すオプション。

• 必須: いいえ
• デフォルト: true

placement: ‘top’ | ‘top-start’ | ‘top-end’ | ‘right’ | ‘right-start’ | ‘right-end’ | ‘bottom’ | ‘bottom-start’ | ‘bottom-end’ | ‘left’ | ‘left-start’ | ‘left-end’

ツールチップのアンカーに対する配置を指定するために使用されます。

• 必須: いいえ
• デフォルト: 'bottom'

position: string

注意: 可能な場合は placement プロパティを使用してください。

アンカーに対するポップオーバーの位置を指定する従来の方法。y軸とx軸をスペースで区切った文字列として指定します。'top'、'middle'、'bottom' y軸、および 'left'、'center'、'right' x軸をサポートします。

• 必須: いいえ
• デフォルト: 'bottom'

shortcut: string | object

アクセシブルなキーボードショートカットを追加するためのオプション。

ショートカットが文字列の場合、表示テキストを期待します。ショートカットがオブジェクトの場合、display のプロパティを受け入れます: string と ariaLabel: string。

• 必須: いいえ

text: string

アンカー要素がフォーカスまたはホバーされたときにツールチップに表示されるテキスト。

• 必須: いいえ