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

※以前別の場所で書いた文章を備忘的に書き記しておきます。

【投稿年月日】2009-03-03 【ジャンル】JavaScript

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

poptitle.js
ma-bank.com/skins/blue2/pop...

 設置は簡単で
<script type="text/javascript" src="./poptitle.js"></script>
のように記述するだけです。

特徴

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

サンプル

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

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

【サンプル2】 競売物件研究所
<img src="../skins/blue2/img/img10.png" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" alt="競売物件研究所" width="96" />


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

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

【サンプル4】 競売物件研究所
<img src="../skins/blue2/img/img10.png" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" alt="競売物件研究所" popimg="../skins/blue2/img/img10.png" width="96" />


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

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

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

EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript