今回はYahoo! UI LibraryのUIの1つであるツールチップ(Tooltip)機能について説明します。一般的なツールチップはブラウザの多くはデフォルトで実現しており、タグのtitle属性で指定したものがマウスオーバーにより表示されます。ただし、ブラウザがサポートするツールチップではテキストしか表示されません。ツールチップに画像とテキストなどを表示させたい場合には、Yahoo! UI Libraryのツールチップを使えば実現することができます。うまく使いこなせば、オリジナリティの高いツールチップを作成できるので、ブログやWebサイトの見栄えやユーザビリティが向上するでしょう。
Yahoo! UI Libraryの入手
まず、Yahoo! UI Libraryを入手しましょう(*1)。Yahoo! UI LibraryのダウンロードはこのURLにある「Download YUI」のボタンをクリックします。
ダウンロードしたファイルはZIP形式になっているので解凍します。解凍するとbuild、 docs、examplesフォルダとREADMEファイルがあります。今回必要になるファイルは下図に示すハイライトされたファイルです。
これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは図のようなフォルダ構成になっています。
*1ここでは執筆時のYahoo! UI Libraryの最新版であるバージョン2.3.1で説明します。