SweetTitleでツールチップに一工夫｜Materializing [マテリアライジング]

ツールチップって？

ハイパーリンク(リンク)や画像の上にマウスカーソルを持っていった際に、そのカーソルの近くに小さい枠付きの表示が出て来た経験はあると思いますが、それです。

文字にリンクを張っている場合は、そのリンク先URLを表示させたり、その逆を行ったりして、訪問者に行き先を明示するのに役立ちます。

ツールチップ改造ツールのDL

[配布元]Sweet Titles Finalized

サイトへの導入

MTへの導入例は下記コードを参考に。

スクリプト

のちの管理も考慮して、jsディレクトリを作成して、その中に2つのスクリプトファイルをアップします。
以下のコードを＜head＞～＜/head＞内に記述

<script type="text/javascript" src="<$MTBlogURL$>js/addEvent.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/sweetTitles.js"></script>

CSS

ファイルをそのまま使用しても良いですが、既存のCSSファイルにコピーして組み込んでしまうのも良いでしょう。その辺りは好みで。

動作確認

スクリプト動作が有効の際に作用します。
title属性が指定されているリンクの上にカーソルを持っていけば、浮き上がるように属性値が表示されます。

背景色や文字色は先程のCSSを用いて変更します。

動作を変更する(例)

sweetTitles.js 内の記述を変更する事で、動作を変更させる事が出来ます。

• 65行目：500・・・ツールチップが表示されるまでの時間。(例：1000＝1秒後)
• 106行目：80
• 107行目：alpha(opacity:80)・・・フィルターの透明度を指定しています。値を下げればより透明な表示になります。(100＝透明度 0 )

参考記事：

■caramel*vanilla ≫ ツールチップもサイトデザインにあわせてみる　[caramel*vanilla]

■あれこれポップアップ

2006/11/03 20:00:59：記事書き直し