JavaScriptでTooltipを実装する。(2) -glt.js

今回も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に表示させる文字]'/>

ブロック領域の場合は、その領域のどこをクリックしても
Tooltipが表示されることになります。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください