ツールチップ
![]() |
![](http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/HTML_Tooltip_%28ja%29.png/400px-HTML_Tooltip_%28ja%29.png)
ツールチップ(英: tooltip)とは、コンピュータのグラフィカルユーザーインターフェイス (GUI) における表示要素のひとつで、対象にポインティングデバイスのカーソル(マウスポインタなど)を重ね合わせる(マウスオーバーする)と、その周辺に小さな領域が出現し、注釈や補足説明などが表示されるものである[1]。
概要
[編集]グラフィカルユーザーインターフェイス (GUI) において、ラベル文字列や画像などの静的に表示されている情報だけでは十分に説明しきれない、詳しい付随情報やヒントなどを動的に表示するために考案された表現手法・共通要素のひとつ(ウィジェット)である。
例えば、ボタン(コマンドボタン)には押したときの動作を端的に表すための極めて短いラベルのみを設定することが多く[2]、1単語や2単語では十分に説明しきれないこともある。しかし、ボタンを押したときに発生する動作や効果を詳しく説明するツールチップを設定しておけば、ユーザーはボタンを押す前にマウスオーバーしてツールチップを表示することでその動作を把握することができ、初めて使うユーザーへの簡易的なマニュアルとしても利用できる。またツールチップは普段は表示されておらず、表示のための場所を占有しないので画面を広く使えるというメリットがある。ツールバーなどで使われる小さなボタンにラベルではなくアイコン画像を使って面積を節約する場合も、説明のためにツールチップがよく併用される。タブブラウザなどのタブ型UIで、ドキュメントのタイトルやファイル名が長すぎてタブに表示しきれない場合、ツールチップを使って表示することでタブをアクティブにせずとも内容やファイルパスを把握できるようにする、といった使い方もある。
しかし、ツールチップは一定時間経つと自動的に消えてしまう仕様になっていることもあり[3]、その場合ユーザーは消えてしまう前に情報を読み取らなければならず、あまり長い説明を付与することはできない。また、ツールチップの仕組みを知らないユーザーには気づかれにくいし、ツールチップによって下側にあるものが覆い隠されてしまうため、場合によっては使い勝手を損なってしまうこともある。
カーソルが要素を通過するだけではツールチップは表示されず、ある程度の時間同じ位置に静止している必要があるため、スタイラスペンのようなポインティングデバイスでは微妙な手振れによってうまく表示できないこともある。後述のタッチ入力環境のようにツールチップ方式がそもそも使えないGUI環境もある。
表示する手順
[編集]カーソル(主にマウスポインタ)の操作が必要である。
- ユーザーがカーソルを何らかの要素にマウスオーバーする。
- 原則カーソルの真下から、右または右下[注釈 1]に広がるような形の小さな枠がロールオーバーする。
- その枠内には選択された項目に関する補足説明などが表示される。
ツールチップが消える(非表示となる)条件はいくつかあり、実装によっても異なる。一定時間経つと自動的に消えるものもあれば、カーソルを動かさない限り消えないものもある。要素の表示領域内でカーソルを動かしても消えず、領域からカーソルを外すことで消える仕様になっていることもある。
名称
[編集]Microsoft Officeでは、ポップヒント[4](英: ScreenTips[5])と称されている。開発者向けのMSDNライブラリについては、ツールヒント[6](英: Tooltips[7])と、情報ヒント[6](英: Infotips[7])の2つに類別して呼ばれている。
中でも、Microsoft Officeにおける、追加情報・図・ヘルプ記事へのリンク[4]を付属したものは、拡張ポップヒント[4](英: Enhanced ScreenTips[5])と言う。
また、ウィキペディアでは脚注にマウスオーバーさせれば脚注ツールチップ(英: Reference Tooltips)が表示される[注釈 2]。
類似の機構
[編集]バルーン
[編集]Microsoft Windowsでは似たような機構として、主にテキストボックスで使われることを想定した吹き出し型のバルーン[8](英: Balloons[9])がある。内部的にはTTS_BALLOON
スタイル属性を持つWin32ツールチップコントロールの一形態である[10]。バージョン5.80以降のコモンコントロールとして使用可能[11]。
Mac OSでも似たような機構としてバルーンヘルプ[12]を備えていた。
その他
[編集]特に古いソフトウェアで、選択されたツールの説明をステータスバーに表示するものもあるが、そのような機能は通常はツールチップとは言わない。
なお、ツールチップの代わりにマウスオーバーで各種プレビューが表示される場合もある。
応用例
[編集]ツールチップの実際の応用例は、デスクトップアプリケーションのみならずウェブページにおいて広く普及している。多くの GUI ベースのウェブブラウザでは、HTML の汎用属性である title
属性を、その要素の上にカーソルが乗ったときに表示するようにしている。これらのブラウザでは、ウィキペディア上で画像やハイパーリンクにカーソルを重ねた場合にもツールチップが表示されるであろう。いくつかのブラウザ(特に Internet Explorer など)では、img
要素に設定された alt
属性についても、title
属性と同じ要領でツールチップを表示する。なお、 title
属性と alt
属性が両方設定された場合は、ツールチップの内容として title
属性の値のほうを優先するが、この挙動が妥当であるかどうかについては議論がある[要出典]。
タッチUIにおける問題点
[編集]![]() | この節には独自研究が含まれているおそれがあります。 |
マウスオーバーによって展開や表示が開始されるメニューやツールチップといったポインティングデバイス操作前提のUIは、タッチパネルを利用したタッチ操作には不向きである。というのも、指先によるタッチ操作では基本的にシングルタップが操作の基本となるため、タップ(クリック)とホバーを区別することができず、マウスやスタイラスペンなどのポインティングデバイスによるホバー操作を直接代替・シミュレートするのが難しいからである。
スマートフォンやタブレットのようなタッチパネルがメインもしくは唯一の操作手段となるモバイルデバイスが普及するにつれて、ホバー操作の問題が顕在化する。この問題を解決するための方法として、マウス操作を前提としたアプリケーションやWebページデザインの見直しとタッチ対応への移行が挙げられるが、Microsoft Windows 8上のInternet Explorer 10やWindows 8.1上のInternet Explorer 11のように、ブラウザ側で独自に拡張した機能によってタッチによるホバー操作(ホバータッチ)をサポートする例も見られる[13] [14]。Androidでは類似のアプローチとして、ビューを長押ししたときにツールチップを表示することができるようになっている[15]。
脚注
[編集]注釈
[編集]出典
[編集]- ^ ツールチップ(tooltip)とは - IT用語辞典 e-Words
- ^ Command Buttons in Windows 7 - Win32 apps | Microsoft Docs
- ^ About Tooltip Controls - Win32 apps | Microsoft Docs
- ^ a b c ポップ ヒントの表示と非表示を切り替える - Office のサポート
- ^ a b Show or hide ScreenTips - Office Support
- ^ a b “Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > ツールヒントと情報ヒント”. web.archive.org. Microsoft. 2015年7月3日時点のオリジナルよりアーカイブ。2019年5月16日閲覧。
- ^ a b “Tooltips and Infotips - Win32 apps” (英語). docs.microsoft.com. Microsoft Docs. Microsoft. 2022年1月29日閲覧。
- ^ “Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > バルーン”. web.archive.org. Microsoft. 2015年7月3日時点のオリジナルよりアーカイブ。2019年5月16日閲覧。
- ^ Balloons - Win32 apps | Microsoft Docs
- ^ How to Implement Balloon Tooltips - Win32 apps | Microsoft Docs
- ^ Tooltip Styles (CommCtrl.h) - Win32 apps | Microsoft Docs
- ^ バルーンヘルプ - 意味・説明・解説 : ASCII.jpデジタル用語辞典
- ^ ホバー タッチ サポート (Windows)
- ^ “IE11: 現在そして将来の Web に対応するタッチ ブラウジング - IEBlog 日本語 - Site Home - MSDN Blogs”. 2015年11月5日時点のオリジナルよりアーカイブ。2016年1月15日閲覧。
- ^ ツールチップ | Android デベロッパー | Android Developers
外部リンク
[編集]![]() |
(英語)
- Thesaurus Free Tooltip Toolkit Demo
- Bubble Tooltip Demo (archive.orgによるウェブアーカイブ)
- Title on image: [techs] Latest HTML Techniques Draft from Sailesh Panchang on 2003-12-03 ([email protected] from October to December 2003) - 画像に
title
を用いるべきではないという旨の W3C の見解
(日本語)
- img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト (もじら組、ウェブアーカイブ)
- imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明 (神崎正英)
- 実践アクセシブルHTML - altはつけるだけじゃなくて (森田雄)
- UIデザインにおける適切なツールチップの使い方 | UX MILK