Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

popover="hint"

popover="hint" はツールチップ的な一時的な情報表示用のポップオーバーです。他の hint ポップオーバーや auto ポップオーバーと共存できます。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
api.HTMLElement.popover.hint
133
133
149
133
html.global_attributes.popover.hint

ヒント値
133
133
149
133
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<button popovertarget="hint-pop">Help</button>
<div id="hint-pop" popover="hint">
  <p>Additional information will be displayed here.</p>
</div>

ライブデモ

Hint popover

Use a small popover for contextual help attached to a trigger button.

プレビュー全画面表示

Inline help pattern

Pair a compact help trigger with a short instructional popover.

プレビュー全画面表示

Popover note

Keep the copy short so the hint stays lightweight and contextual.

プレビュー全画面表示

実務での使いどころ

  • popover="hint" の活用

    popover=hint。ツールチップ型のポップオーバー。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク