軽量ツールチップ「poptitle.js」

軽量ツールチップ「poptitle.js」　　 2009-03-03

　Ｗｅｂサイト（のトップページ）のデザイン変更に合わせて、ツールチップの出力方法も変更しました。javascriptのライブラリーを探しましたが、軽量でいいものが見当たらなかったので、他のツールチップを参考に自作しました。

poptitle.js
http://ma-bank.com/skins/blue2/...

　設置は簡単で

のように記述するだけです。

特徴

設置が簡単。
軽量。カスタマイズが容易。
フェードイン・フェードアウトに対応。
透明度等を細かく指定することが可能。
aタグとimgタグに対応。
HTMLの記述が可能。
javascriptが無効の場合でもtitleは表示されるので影響なし。

サンプル

　aタグかimgタグにtitle属性がある場合、ツールチップがフェードイン・フェードアウトされます。なお、imgタグの場合は、alt属性がタイトルとして表示さます。

【サンプル１】　競売物件研究所

<a href="http://bit.tisoku.net/" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。">競売物件研究所</a>

【サンプル２】　

　また、popimg属性に画像のパスを指定すると場合、ツールチップに画像を追加されます。

【サンプル３】　競売物件研究所

<a href="http://bit.tisoku.net/" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" popimg="../skins/blue2/img/img10.png">競売物件研究所</a>

【サンプル４】　

　HTMLを記述することも可能ですが、「<」「>」「"」「&」をエスケープする必要があるので少し面倒かもしれません。

【サンプル５】　競売物件研究所

<a href="http://bit.tisoku.net/" title="全国の<strong>競売不動産</strong>のランキング・利回り・地図等の各種情報を<span style="color:red; font-size:18px;">提供中</span>。" popimg="../skins/blue2/img/img10.png">競売物件研究所</a>

【サンプル６】　競売物件研究所

<a href="http://bit.tisoku.net/" title="全国の<strong>競売不動産</strong>のランキング・利回り・地図等の各種情報を<span style="color:red; font-size:18px;">提供中</span>。<img src="../skins/blue2/img/img10.png" alt="" />">競売物件研究所</a

カスタマイズ

　「poptitle.js」の以下の部分を変更することで、フェードイン・フェードアウトなどをカスタマイズすることができます。

var css_width = 250;　//ツールチップの幅
var css_border = "solid 1px #aaa";　//ツールチップの枠線
var title_tag = "h3";　//ツールチップのタイトルタグ
var speed = 20;　//フェードイン・フェードアウトのスピード
var timer = 200;　//フェードイン・フェードアウトの時間
var timer_end = 100;　//フェードアウトまでの待機時間
var alpha_start = 60;　//フェードイン開始時の透明度
var alpha_end = 93;　//フェードイン終了時の透明度
var h_offset = 10;　//ツールチップの離れ具合（縦）
var v_offset = 10;　//ツールチップの離れ具合（横）

　ツールチップのCSSについては「cssSet:function(ps)」の部分をカスタマイズします。また、「ps.fontWeight = "bold";」のようにCSSを簡単に追加することもできます。

ps.color = "#000";　//ツールチップの文字色
ps.background = "#eee";　//ツールチップの背景色
ps.fontSize = "13px";　//ツールチップの文字サイズ
ps.lineHeight = "180%";　//ツールチップの行の高さ
ps.width = css_width + "px";　//ツールチップの幅
ps.padding = "5px";　//ツールチップの文字色
ps.border = css_border;　//ツールチップの枠線
ps.textAlign = "left";　//ツールチップの行揃え
ps.zIndex = "100";
ps.position = "absolute";

軽量ツールチップ「poptitle.js」　(2009-03-03)　　　