position: popup

ツールチップ

[1] ツールチップ (tooltip) は、 GUI 環境において :hover 状態の時に小さなoverlay 表示することにより表示される短い文章、あるいはそのです。

[10] ポップアップ (popup) と呼ぶこともあります。 ポップアップという語の方が、ツールチップよりもやや情報量が多め (サイズが大きめ) なニュアンスがあるかもしれません。 また、ツールチップ:hover により自動表示されるものを主に指し、 ポップアップ利用者の明示的な指示 (クリックなど) によるものをも含むニュアンスがあるかもしれません。

一般的な性質

[5] ツールバー上のアイコンなど意味が必ずしも自明でないものには、 適切なテキストを補うツールチップを表示するのが好ましいと考えられています。

[6] プラットフォームによっては一定秒数経過後までマウスカーソルを移動させないと、 自動的にツールチップを隠すものもあります。しかし利用者にとって不便だと考える人もいます。

[7] プラットフォームによっては活性でないについてはツールチップを表示しません。

[20] 表示状態が変化してツールチップが指していたものが消失したら、 ツールチップも自動的に消えるべきです。

[21] 例えばボタンツールチップ表示中にボタンが消えてなくなったら、 ツールチップも消えるべきです。

[22] ツールチップが指していたものがスクロールなどで移動したら、 ツールチップもそれに応じた動作をするべきです。一般的には、 ツールチップは消えます。

Web におけるツールチップ

[2] Web では title 属性の値をツールチップとして表示することが慣行となっています。

[3] かつては alt 属性ツールチップとして表示する Webブラウザーもありました。

[4] Webブラウザーによってはリンク先 (href 属性から得た URL) をツールチップとして表示することがあります。

[8] Webブラウザーによってはフォーム制御子の入力に関する制約やフォームバリデーションの結果をツールチップツールチップ状のポップアップで表示することがあります。

レンダリング

[24] ツールチップ配置

関連

[18] ポップアップ窓も参照。

[17] 親となるの範囲外に表示される (可能性がある) という点でポップアップメニューと似ているかもしれません。

歴史

[11] WinHelp は、 ページ遷移を伴うハイパーリンクの他に、 点線下線のテキストをクリックするとリンク先がポップアップ表示される機能を持っていました。 用語解説などで使われていました。

[12] Windows 95 以来の GUIイディオムとして、 ダイアログタイトルバー閉じる (×) ボタンの横の隣の ? ボタンでヘルプモードとなり (cursor: help)、 ボタン等をクリックするとそれに関するヘルプポップアップ表示されることになっていました。

position: popup

[13] Web Controls 1.0 は任意の要素ポップアップ表示する機能として position: popup を提案していました。

<popup>

[25] HTMLayout specific tags, , https://web.archive.org/web/20101123213344/http://terrainformatica.com/htmlayout/tags.whtm

[140] HTML要素概説
要素名
popup
日付
説明
時点で HtmLayout は、 popup を実装していた。 ツールチップ等のポップアップ表示に用いる。
出典

[9] [Proposal] CSS 'tooltip' Property (François REMY著, ) https://lists.w3.org/Archives/Public/www-style/2009Apr/0221.html

[23] 単位の換算や時差の計算も手軽に行える「Opera 48」が正式版に ~スクショ機能も追加 - 窓の杜 (株式会社インプレス著, ) http://forest.watch.impress.co.jp/docs/news/1083253.html

HTML5

<menu>

HTML Standard

popover