Wikipedia

ツールチップ

ウィキペディア ウィキペディアにおけるツールチップについて、

ツールチップ（英: tooltip）とは、コンピュータのグラフィカルユーザーインターフェイス (GUI) における表示要素のひとつで、対象にポインティングデバイスのカーソル（マウスポインタなど）を重ね合わせる（マウスオーバーする）と、その周辺に小さな領域が出現し、注釈や補足説明などが表示されるものである[1]。

ウェブブラウザで、ハイパーリンクにマウスポインタを当てた場合のツールチップの例。"HTML"という文字列に"HyperText Markup Language"を指定。現在ウィキペディアでの既定の動作とは異なる場合があります。

概要

編集

グラフィカルユーザーインターフェイス (GUI) において、ラベル文字列や画像などの静的に表示されている情報だけでは十分に説明しきれない、詳しい付随情報やヒントなどを動的に表示するために考案された表現手法・共通要素のひとつ（ウィジェット）である。

例えば、ボタン（コマンドボタン）には押したときの動作を端的に表すための極めて短いラベルのみを設定することが多く[2]、1単語や2単語では十分に説明しきれないこともある。しかし、ボタンを押したときに発生する動作や効果を詳しく説明するツールチップを設定しておけば、ユーザーはボタンを押す前にマウスオーバーしてツールチップを表示することでその動作を把握することができ、初めて使うユーザーへの簡易的なマニュアルとしても利用できる。またツールチップは普段は表示されておらず、表示のための場所を占有しないので画面を広く使えるというメリットがある。ツールバーなどで使われる小さなボタンにラベルではなくアイコン画像を使って面積を節約する場合も、説明のためにツールチップがよく併用される。タブブラウザなどのタブ型UIで、ドキュメントのタイトルやファイル名が長すぎてタブに表示しきれない場合、ツールチップを使って表示することでタブをアクティブにせずとも内容やファイルパスを把握できるようにする、といった使い方もある。

しかし、ツールチップは一定時間経つと自動的に消えてしまう仕様になっていることもあり[3]、その場合ユーザーは消えてしまう前に情報を読み取らなければならず、あまり長い説明を付与することはできない。また、ツールチップの仕組みを知らないユーザーには気づかれにくいし、ツールチップによって下側にあるものが覆い隠されてしまうため、場合によっては使い勝手を損なってしまうこともある。

カーソルが要素を通過するだけではツールチップは表示されず、ある程度の時間同じ位置に静止している必要があるため、スタイラスペンのようなポインティングデバイスでは微妙な手振れによってうまく表示できないこともある。後述のタッチ入力環境のようにツールチップ方式がそもそも使えないGUI環境もある。

表示する手順

編集

カーソル（主にマウスポインタ）の操作が必要である。

  1. ユーザーがカーソルを何らかの要素にマウスオーバーする。
  2. 原則カーソルの真下から、右または右下[注釈 1]に広がるような形の小さな枠がロールオーバーする。
  3. その枠内には選択された項目に関する補足説明などが表示される。

ツールチップが消える（非表示となる）条件はいくつかあり、実装によっても異なる。一定時間経つと自動的に消えるものもあれば、カーソルを動かさない限り消えないものもある。要素の表示領域内でカーソルを動かしても消えず、領域からカーソルを外すことで消える仕様になっていることもある。

名称

編集

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]を備えていた。

その他

編集

特に古いソフトウェアで、選択されたツールの説明をステータスバーに表示するものもあるが、そのような機能は通常はツールチップとは言わない。

なお、ツールチップの代わりにマウスオーバーで各種プレビューが表示される場合もある。

→詳細は「カーソル § プレビュー」を参照
→「Windows Aero」も参照

応用例

編集

ツールチップの実際の応用例は、デスクトップアプリケーションのみならずウェブページにおいて広く普及している。多くの 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]。

脚注

編集
[脚注の使い方]

注釈

編集
  1. ^ LTR言語（左から右に書く英語のような言語）環境の場合。RTL言語（右から左に書くアラビア語のような言語）環境では逆方向になる。
  2. ^ 脚注ツールチップに含まれている設定ボタンを選択することで、ツールチップを表示するタイミングをクリックしたときに変更可能。並びに、ツールチップを表示するまでの秒数 (ミリ秒) の設定や、無効化することもできる。

出典

編集
  1. ^ ツールチップ（tooltip）とは - IT用語辞典 e-Words
  2. ^ Command Buttons in Windows 7 - Win32 apps | Microsoft Docs
  3. ^ About Tooltip Controls - Win32 apps | Microsoft Docs
  4. ^ a b c ポップ ヒントの表示と非表示を切り替える - Office のサポート
  5. ^ a b Show or hide ScreenTips - Office Support
  6. ^ a b “Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > ツールヒントと情報ヒント”. web.archive.org. Microsoft. 2015年7月3日時点のオリジナルよりアーカイブ。2019年5月16日閲覧。
  7. ^ a b “Tooltips and Infotips - Win32 apps” (英語). docs.microsoft.com. Microsoft Docs. Microsoft. 2022年1月29日閲覧。
  8. ^ “Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > バルーン”. web.archive.org. Microsoft. 2015年7月3日時点のオリジナルよりアーカイブ。2019年5月16日閲覧。
  9. ^ Balloons - Win32 apps | Microsoft Docs
  10. ^ How to Implement Balloon Tooltips - Win32 apps | Microsoft Docs
  11. ^ Tooltip Styles (CommCtrl.h) - Win32 apps | Microsoft Docs
  12. ^ バルーンヘルプ - 意味・説明・解説 : ASCII.jpデジタル用語辞典
  13. ^ ホバー タッチ サポート (Windows)
  14. ^ “IE11: 現在そして将来の Web に対応するタッチ ブラウジング - IEBlog 日本語 - Site Home - MSDN Blogs”. 2015年11月5日時点のオリジナルよりアーカイブ。2016年1月15日閲覧。
  15. ^ ツールチップ | Android デベロッパー | Android Developers

外部リンク

編集

（英語）

（日本語）

関連項目

編集
 
ウィキメディア・コモンズには、ツールチップに関連するカテゴリがあります。
 

この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja.wikipedia.org/w/index.php?title=ツールチップ&oldid=101113423」から取得