jQueryでツールチップみたいなの
JavaScriptでリンクにマウスオーバーしたら、ツールチップを出すようにしたいんだけど。
ツールチップの中身はHTMLで好きに変えれるように。
ってな感じの事を言われたので、色々調べてやってみました。
JSはあんまし触った事ないし、とりあえずjQuery使ってやったら出来るかも、みたいな浅い知識しかないわけですけど、
なんとか出来ました。
なんでjQueryなの、とかは聞かないで下さい
まずはとりあえずググってみた。
すると、こういったものがあった。
CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture
おー！まさに！！といった動きなんですが、問題が。
これだと、ポップアップの中身がHTMLで書けないんです。
実際にポップアップするところのソース。
<a href="#cssLecture" title="サンプルリンク1">サンプルリンク</a>
デモのページを見てもらえばわかるとおり、このやり方は、aタグのtitleの中身をポップアップする仕様です。
なので、titleの中でタグを展開するわけにもいかず…。
で、他にも色々見てたんだけど、なかなかドンピシャのものがなかったので、作ってしまおう、と。
そんなこんなで出来たものがこれ。
jQueryは今日時点で最新のものを使用しています。(v.1.3.2)
JavaScriptのソース。
//tooltip.js
$(document).ready(function(){
var a_ele = $("a.tooltip");
a_ele.mouseover(function(e){
var name = e.target.name;
var div_ele = $("div#" + name);
div_ele.css({"opacity":0, "display":"block"});
div_ele.fadeTo("fast", 0.9);
});
a_ele.mousemove(function(e){
var name = e.target.name;
var div_ele = $("div#" + name);
var x = e.pageX + 20;
var y = e.pageY;
div_ele.css("left", x);
div_ele.css("top", y);
});
a_ele.mouseout(function(e){
var name = e.target.name;
var div_ele = $("div#" + name);
div_ele.css({"display":"none"});
});
});
全然たいした事はやってなくて、要するに、
リンクにマウスオーバーしたら指定のidのdivブロックを表示してポジションを変えて、
マウスムーブしたらそのポジションを更新して、
マウスアウトしたら、そのブロックを非表示にする、って感じです。
マウスアウトした時にフェードアウトさせようと思ったけど、
なんか動きがおかしくなったのでやめました。
HTMLはこんな感じ。
<a href="#" class="tooltip" name="tip1">jQuery tool tip test</a><br /> <div id="tip1" class="mainText">TEST POP UP ver1.0</div>
classにtooltipって名前があるものが対象となって、nameで指定したidを持つdivをポップアップ表示させます。
なので、複数作る場合はこう。
<a href="#" class="tooltip" name="tip1">jQuery tool tip test 一つ目</a><br /> <a href="#" class="tooltip" name="tip2">jQuery tool tip test 二つ目</a><br /> <div id="tip1" class="mainText">ポップアップ一つ目</div> <div id="tip2" class="mainText">ポップアップ二つ目</div>
この複数ある時にそれぞれ指定したポップアップを出す部分が結構悩んだ。
あとは、divの中を好きに変えたらいいんではないかと。
classはポップアップに関係ないので、ここでCSSの指定をしてもらったら良いと思います。
何かありましたらコメント下さい。
参考リンク：
jQuery 1.3.2 日本語リファレンス
jQuery入門
[...] スオーバーで表示されるもの）がなかなかうまくいかなかった。 http://www.mrlittlebig.com/blog/033/ [...]
areaでは不可能なのでしょうか？
返事遅くなりましてすみません。
記事内でのJSでは、
var a_ele = $(“a.tooltip”);
と、しているため、aタグにのみ、紐づいています。
ですので、この部分を、
var area_ele = $(“area.tooltip”);
と、して、areaタグに紐づくようにしてください。
しかしこの場合ですと、なぜかareaタグ内のnameの値を拾ってくれませんでしたので、altで対応してみました。
まとめると、以下のようになりました。
▼JS
var area_ele = $(“area.tooltip”);
area_ele.mouseover(function(e){
-中略-
});
area_ele.mousemove(function(e){
-中略-
});
area_ele.mouseout(function(e){
-中略-
});
▼HTML
<img src=”xxx.jpg” usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”0, 0, 135, 45″ href=”#” class=”tooltip” alt=”tip” />
</map>
付け焼刃な対応な気がしますので、ご使用前に検証して下さい。