Edit

Page

Page title:

Page body:

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

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

* 一般的な性質

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

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

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

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

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

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

* Web におけるツールチップ

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

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

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

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

[24] [[ツールチップ配置]]

* 関連

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

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

* 歴史

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

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

@@ [26] 
[CODE[title=""]]

** [CODE[position: popup]]

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

[REFS[
- [19] 
[CITE@en-GB-hixie[Web Applications Markup Language 1.0]]
( ([TIME[2004-04-08 02:39:12 +09:00]] 版))
<http://hixie.ch/specs/html/apps/web-apps-1#changes0>
- [14] 
[CITE@en-GB-hixie[Web Controls 1.0]]
([TIME[2004-11-09 08:49:52 +09:00]] 版)
<http://www.whatwg.org/specs/web-controls/current-work/#popup>
- [15] 
[CITE@en-GB-hixie[Web Controls 1.0]] ([TIME[2017-06-02 18:45:02 +09:00]]) <https://whatwg.org/specs/web-controls/current-work/#the-elementui>
- [16] 
[CITE@en-GB-hixie[Web Controls 1.0]]
([TIME[2004-11-09 08:49:52 +09:00]] 版)
<http://www.whatwg.org/specs/web-controls/current-work/#changes0>
]REFS]

** [CODE[<popup>]]

[25] [CITE[HTMLayout specific tags]], [TIME[2024-08-17T08:53:07.000Z]], [TIME[2010-11-23T21:47:13.289Z]] <https://web.archive.org/web/20101123213344/http://terrainformatica.com/htmlayout/tags.whtm>

[FIG(data)[ [140] [[HTML要素概説]]

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

- 
[CITE[HTMLayout specific tags]], 
[DATA(.author)[[[Terra Informatica Software Design]]]],
[TIME(.published)[2003]],
[TIME[2024-08-17T08:56:31.000Z]], [TIME[2010-11-23T21:50:37.804Z]] <https://web.archive.org/web/20101123213344/http://terrainformatica.com/htmlayout/tags.whtm>

]REFS]

]FIG]

[9] [CITE@en['''['''Proposal''']''' CSS 'tooltip' Property]]
([[François REMY]]著, [TIME[2009-04-13 19:29:15 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2009Apr/0221.html>

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

** HTML5

[SEE[ [[<menu>]] ]]

** [CITE[HTML Standard]]

[SEE[ [[popover]] ]]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)