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はこんな感じ。
classにtooltipって名前があるものが対象となって、nameで指定したidを持つdivをポップアップ表示させます。
なので、複数作る場合はこう。
この複数ある時にそれぞれ指定したポップアップを出す部分が結構悩んだ。
あとは、divの中を好きに変えたらいいんではないかと。
classはポップアップに関係ないので、ここでCSSの指定をしてもらったら良いと思います。
何かありましたらコメント下さい。
参考リンク：
jQuery 1.3.2 日本語リファレンス
jQuery入門
1 Comment
Jump to comment form | comments rss [?] | trackback uri [?]