MooToolsでツールチップ
ツールチップとはいわゆるバルーンみたいな感じで、マウスのロールオーバー・アウトなどのイベント時に噴出しみたいなやつを出す仕組みを言います。
MooToolsではあらかじめこれを作るための仕組みを持っているのですが、オフィシャルサイトでも資料が見当たらない。
ということでいろいろ参考サイトを回り、つくって見ました。
主に参考にしたのは以下のページです。とてもよくわかりました。
http://rosea.jpn.org/mootools/
このサイトとMooToolsのTipsのコードを少し読めばすぐわかります。後はいつものようにFirebugとかで動的に作成されるエレメントを探ってCSSを設定です。
ということでサンプルコード。
// Wait for the content ...
window.addEvent("domready", function() {
// Create tooltips
var as = [];
$$("dl#listsToTooltip dd a").each(function(a){
if (a.getAttribute("title")) as.push(a);
});
var myTips = new Tips(as, {
maxTitleChars: 25,
onShow: function(tip){
tip.fade("in");
tip.setStyle("opacity", "0.8");
},
onHide: function(tip){
tip.fade("out");
tip.setStyle("visibility", "hidden");
},
offsets: {'x': -10, 'y': 15}
});
});
ID名が「listsToTooltip」というdl要素内の、さらにdd要素内のaタグにツールチップ処理をつけていくというものです。
このときにツールチップ内に表示される項目はタイトルとしてaタグのtitle属性、テキスト（内容）としてhref属性またrel属性の値が使用されますが、後者はrel属性を優先的に使用します。rel属性の定義がない場合にhref属性を使います。
あとは、表示されたとき（onShow）や隠すとき（onHide）に好きな処理を入れていくだけです。setStyle()でしているのは表示／非表示の操作で、fade()でしているのはフェードイン・アウトの処理です。
これがロード時に実行されるわけですが、その後ドキュメントの最後尾にdiv要素を1つ作成します（以下、例）。
<div style="position: absolute; top: 379px; left: 255px; visibility: hidden; opacity: 0;">
<div class="tip-top"></div>
<div class="tip">
<div class="tip-title"></div>
<div class="tip-text"></div>
</div>
<div class="tip-bottom"></div>
</div>
これに対してCSSをつけていけばOK。
もうひとつこれの優れているところ。
属性値を表示使っているので、画像の表示はできないかなとか思いながらも以下のようなコードをツールチップの対象となるデータにつけて見ました。
<a href="#" class="bookmark" rel="000000" title="<img src='./images/image1.png' width='75' height='30' alt='image1' title='image1' />">DaFont<small>http://www.tom-gs.com/</small></a>
これがすごいことに動いたんですね。ツールチップ上に画像が表示されました。
ちなみにJavaScriptのDOM関数で動的に生成するものの場合は、エンティティではなく、通常のタグのように入れるほうがいいみたいです。
var img = document.createElement("img");
img.setAttribute("title", "<img src='./images/image1.png' width='75' height='30' alt='image1' title='image1' />");