Tooltip

ツールチップディレクティブは、コンポーネントに関するアドバイザリー情報を提供します。

インポート #


import Tooltip from 'primevue/tooltip';

app.directive('tooltip', Tooltip);

位置 #

ツールチップを配置する場所は4つあります。デフォルト値は右で、代替は上、下、左です。


<InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
<InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
<InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />

イベント #

ツールチップを表示するイベントは修飾子として定義され、デフォルトのイベントはホバーです。


<InputText v-tooltip.focus.top="'Enter your username'" type="text" placeholder="Focus" />

自動非表示 #

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


<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />

遅延 #

enterイベントとleaveイベントへの遅延は、それぞれshowDelayオプションとhideDelayオプションで定義されます。


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

カスタム #

カスタムスタイルとコンテンツを持つツールチップのサンプル。


<Button
    v-tooltip.bottom="{
        value: 'PrimeVue Rocks',
        pt: {
            arrow: {
                style: {
                    borderBottomColor: 'var(--p-primary-color)'
                }
            },
            text: '!bg-primary !text-primary-contrast !font-medium'
        }
    }"
    label="Button"
/>

アクセシビリティ #

スクリーンリーダー

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

キーボードサポート

キー	機能
escape	フォーカスがターゲットにあるときにツールチップを閉じます。