寺子屋未満

今回もTooltip。

[GLT – Good-Looking Tolltips]
http://www.robertnyman.com/glt/index.htm
画像やCSSを自分で準備しなければいけない分、前回よりは難しいかもしれません。
ですが、導入するファイルは少なく軽量であるところや、
一つのページで一括してカスタマイズCSSが使えるところは、
使いようによっては便利な気がします。

[ダウンロードと準備]
【JavaScript】
GLTのトップページの[Download the JavaScript file.]からglt.jsをダウンロードします。

【CSS】
GLT ＞ Implementation [Customizing the look]に書かれているCSSをコピーし、
自分のページに取り込みます。
もちろん、このCSSはカスタマイズ可能。
今回は寺子屋のデザインにあわせ、Tooptipの色をピンクにします。（デフォルト設定はグレー）
書き換える部分は簡単です。.glt-elm p{
　　　　background: [ここに好きなカラーコードを記述];
　　　　margin: 0;
　　　　padding: 0.5em;
}文字色を変更する場合は、次の部分を変えます。.glt-elm{
　　　　position: absolute;
　　　　left: 0;
　　　　top: 0;
　　　　width: 150px;
　　　　color: [ここに好きなカラーコードを記述];
　　　　opacity: 0.9;
　　　　visibility: hidden;
}

【画像】
Tooltipの上下に設定する画像を準備します。
デフォルト画像はImplementationのCSSの下、
[top rounded image] [bottom rounded image] から取得することができます。
この画像をもとに、自分の表示したいTooptipにあわせて加工します。
今回は背景色を変えているので、画像もそれに合わせます。

画像が準備できたら、画像のPathをglt.jsに記述します。
9行目、10行目に画像を設定している部分があるので
（Customization parameters とコメントあり）
そこを自分の画像Pathに合わせて書き換えます。
注：Tooptipを表示させるページから見たPathを記述します。

画像を指定しない場合はnulを記述します。（角が四角いままのTooltipとなります）
topImagePath : "Tooptip上部分の画像Path",
bottomImagePath : "Tooptip下部分の画像Path",

[指定方法]
ここまでの準備はちょっと手間がかかりますが、使用方法はとても簡単です。
マウスオーバーした際に、Tooptipを表示させたい領域に [title]指定するだけ。
titleが指定された領域は、全て設定したTooltipが表示されます。
ですので、このブログのページでタイトルが指定されている部分は全て、
このTooltipが適用されていることと思います。

<div title='[Tooltipに表示させる文字]'>xxxxxxxx</div>
<a href='#' title='[Tooltipに表示させる文字]'>xxxxxxxx</a>
<span title='[Tooltipに表示させる文字]'>xxxxxxxx</span>
<img src='Image url' title='[Tooltipに表示させる文字]'/>

リンクの場合はこのようになります。
span タグの場合も同様に、Tooltipが表示されます。

統一感を持たせたいサイトなどでは、最初に準備しておけば
手間なく使用できるので、有効なTooltipかもしれません。