ツールチップ

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

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

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

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

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

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

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

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

## 名称
Microsoft Officeでは、**ポップヒント**（）と称されている。開発者向けのMSDNライブラリについては、**ツールヒント**（）と、**情報ヒント**（）の2つに類別して呼ばれている。

中でも、Microsoft Officeにおける、追加情報・図・ヘルプ記事へのリンクを付属したものは、**拡張ポップヒント**（）と言う。

また、ウィキペディアでは脚注にマウスオーバーさせれば**脚注ツールチップ**（）が表示される。

## 類似の機構
### バルーン
Microsoft Windowsでは似たような機構として、主にテキストボックスで使われることを想定した吹き出し型の**バルーン**（）がある。内部的には`TTS_BALLOON`スタイル属性を持つWin32ツールチップコントロールの一形態である。バージョン5.80以降のコモンコントロールとして使用可能。

Mac OSでも似たような機構としてを備えていた。

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

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

## 応用例
ツールチップの実際の応用例は、デスクトップアプリケーションのみならずウェブページにおいて広く普及している。多くの GUI ベースのウェブブラウザでは、HTML の汎用属性である `title` 属性を、その要素の上にカーソルが乗ったときに表示するようにしている。これらのブラウザでは、ウィキペディア上で画像やハイパーリンクにカーソルを重ねた場合にもツールチップが表示されるであろう。いくつかのブラウザ（特に Internet Explorer など）では、`img` 要素に設定された <code>alt</code>属性についても、`title` 属性と同じ要領でツールチップを表示する。なお、 `title` 属性と `alt` 属性が両方設定された場合は、ツールチップの内容として `title` 属性の値のほうを優先するが、この挙動が妥当であるかどうかについては議論がある。

## タッチUIにおける問題点

マウスオーバーによって展開や表示が開始されるメニューやツールチップといったポインティングデバイス操作前提のUIは、タッチパネルを利用したタッチ操作には不向きである。というのも、指先によるタッチ操作では基本的にシングルタップが操作の基本となるため、タップ（クリック）とホバーを区別することができず、マウスやスタイラスペンなどのポインティングデバイスによるホバー操作を直接代替・シミュレートするのが難しいからである。

スマートフォンやタブレットのようなタッチパネルがメインもしくは唯一の操作手段となるモバイルデバイスが普及するにつれて、ホバー操作の問題が顕在化する。この問題を解決するための方法として、マウス操作を前提としたアプリケーションやWebページデザインの見直しとタッチ対応への移行が挙げられるが、Microsoft Windows 8上のInternet Explorer 10やWindows 8.1上のInternet Explorer 11のように、ブラウザ側で独自に拡張した機能によってタッチによるホバー操作（ホバータッチ）をサポートする例も見られる 。Androidでは類似のアプローチとして、ビューを長押ししたときにツールチップを表示することができるようになっている。

## 脚注

### 注釈

### 出典

## 外部リンク

（英語）
* Thesaurus Free Tooltip Toolkit Demo
* Bubble Tooltip Demo (archive.orgによるウェブアーカイブ)
* Title on image:   Latest HTML Techniques Draft from Sailesh Panchang on 2003-12-03 (w3c-wai-gl@w3.org from October to December 2003) - 画像に `title` を用いるべきではないという旨の W3C の見解

（日本語）
* img要素でalt属性の内容がポップアップしない - Web標準普及プロジェクト (もじら組、ウェブアーカイブ)
* imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明 (神崎正英)
* 実践アクセシブルHTML - altはつけるだけじゃなくて (森田雄)
* UIデザインにおける適切なツールチップの使い方 | UX MILK

## 関連項目

* ふきだし - 漫画で台詞を表す。
* alt属性