ツールチップ

ツールチップ機能は、様々なPrimeReactコンポーネントに統合されています。

インポート#


import { Tooltip } from 'primereact/tooltip';
         

位置#

フォームコンポーネントには、tooltipプロパティによる組み込みサポートがあり、tooltipOptionsで位置調整などのカスタマイズが可能です。


<InputText type="text" placeholder="Right" tooltip="Enter your username" />
<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
         

イベント#

ツールチップはデフォルトでホバーイベントで表示されます。eventオプションを使用して、代わりにfocusまたはbothを設定できます。


<InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
<InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
<InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
         

自動非表示#

マウスがターゲット要素から離れるとツールチップは非表示になります。ツールチップと対話する必要がある場合は、autoHideをfalseに設定してデフォルトの動作を変更します。


<InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
<InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
         

遅延#

表示と非表示イベントへの遅延の追加は、それぞれshowDelayとhideDelayオプションで定義します。


<Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
         

ターゲット#

スタンドアロンのTooltipコンポーネントは、有効なクエリセレクタを受け入れるtargetプロパティを使用して任意の要素にアタッチできます。この場合、コンテンツとオプションはdata-pr属性で定義する必要があります。


<Tooltip target=".custom-target-icon" />

<i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
    data-pr-tooltip="No notifications"
    data-pr-position="right"
    data-pr-at="right+5 top"
    data-pr-my="left center-2"
    style={{ fontSize: '2rem', cursor: 'pointer' }}>
    <Badge severity="danger"></Badge>
</i>
         

マウス追跡#

mouseTrackオプションが有効になっている場合、ポインタ座標に従ってツールチップの位置が更新されます。


<Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />

<Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
<img className="logo" alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
         

リアクティブ#

ツールチップのコンテンツは、ターゲットコンポーネントに関連する変更を反映してリアクティブです。


<Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />

<Tooltip target=".knob" content={`${knobValue}%`} />
<Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />

<Tooltip target=".slider>.p-slider-handle" content={`${sliderValue}%`} position="top" event="focus" />
<Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
         

無効#

無効な要素は、標準の動作によりユーザーインタラクションをトリガーしません。このような場合の一般的な回避策は、ツールチップがアタッチされた別の要素で無効な要素をラップすることです。ツールチップがコンポーネントに組み込まれている場合は、代わりにshowOnDisabledオプションを有効にします。


<Tooltip target=".disabled-button" />
<span className="disabled-button" data-pr-tooltip="Disabled">
    <Button type="button" label="Save" icon="pi pi-check" disabled />
</span>

<Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
         

テンプレート#

カスタムコンテンツは、contentプロパティを使用するか、子要素としてコンテンツをネストすることによってツールチップの値として配置できます。


<Tooltip target=".custom-tooltip-btn">
    <img alt="logo" src="/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
</Tooltip>

<Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
         

アクセシビリティ#

スクリーンリーダー

ツールチップコンポーネントはtooltipロールを使用し、表示されると、ツールチップの生成されたIDがターゲットのaria-describedbyとして定義されます。

キーボードサポート

キー機能
escapeターゲットにフォーカスがある場合、ツールチップを閉じます。
                        PrimeReact 10.8.3 by PrimeTek