ブログの記事や、自分の場合では Webアプリケーションなどで、その言葉やカラムが何を意味するのか説明を加えたいときがある。プログラムで一覧表など作っている場合は、特にそのID(数字)がどのテーブルデータにリンクしているのか、リンク先データの名前を示したい。が、画面サイズは限りがあるので、一覧表に何でもかんでも掲載できない。

そのような制約がある中で、マウスカーソルをその上に置くと吹き出しとなって表示する、ツールチップと呼ばれる機能が重宝する。情報量が多い場合は Ajax を利用する方法もあるが、そこまでする必要がない場合はツールチップが役に立つ。

で、何か気のきいた jQuery プラグインを利用してその紹介記事を、と思ったのだ。が、試しているうちにツールチップの表示は、どうやらブラウザがデフォルトでその機能を有しているのではないか？という事に思い当った。

と言うのも、HTML タグに title 属性を追加することで、div のようなブロックタグでも、span のようなインラインタグでもツールチップを表示するからである。これは、HTML では一般的なのだろうか？

お恥ずかしい事に、title 属性をあまり意識して使っていなかった。これからは是非利用させていただこう。

あなたのブラウザで、上の太字の「ツールチップ」にマウスカーソルを置いて説明文が表示されるか、試してみて下さい。