今回はYahoo! UI LibraryのUIの1つであるツールチップ(Tooltip)機能について説明します。一般的なツールチップはブラウザの多くはデフォルトで実現しており、タグのtitle属性で指定したものがマウスオーバーにより表示されます。ただし、ブラウザがサポートするツールチップではテキストしか表示されません。ツールチップに画像とテキストなどを表示させたい場合には、Yahoo! UI Libraryのツールチップを使えば実現することができます。うまく使いこなせば、オリジナリティの高いツールチップを作成できるので、ブログやWebサイトの見栄えやユーザビリティが向上するでしょう。

Yahoo! UI Libraryの入手

まず、Yahoo! UI Libraryを入手しましょう(*1)。Yahoo! UI LibraryのダウンロードはこのURLにある「Download YUI」のボタンをクリックします。

Yahoo! UI Libraryのダウンロードサイト

ダウンロードしたファイルはZIP形式になっているので解凍します。解凍するとbuild、 docs、examplesフォルダとREADMEファイルがあります。今回必要になるファイルは下図に示すハイライトされたファイルです。

必要ファイルの抽出

これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは図のようなフォルダ構成になっています。

本稿の構成図

*1ここでは執筆時のYahoo! UI Libraryの最新版であるバージョン2.3.1で説明します。