jqueryを利用してツールチップ的なものを自作 | 電脳備忘録

すでに世の中にはあまたのツールチップ系プラグインが存在していますが、そんな中、あえてjqueryを利用してツールチップ的なものを自作してみました。仕様は指定されたaタグのテキストを元にspanタグを生成してツールチップ的な表示を実行するというものです。

メニューはこんな感じ

<ul id="menu">
<li id="menu01" class="slide-menu"><a href="#section01" class="curtain-links">メニュー1</a></li>
<li id="menu02" class="slide-menu"><a href="#section02" class="curtain-links">メニュー2</a></li>
<li id="menu03" class="slide-menu"><a href="#section03" class="curtain-links">メニュー3</a></li>
</ul>

li.slide-menuにマウスオーバーしたときにa要素のテキストからspan要素をつくって表示。マウスアウトしたらspan要素を削除するようにしています。

//メニューの吹き出し　表示・非表示
$(document).ready(function(){
var tips = $("li.slide-menu");
tips.mouseover(function(e){
var $sid = $(this).attr("id"); //1
var $name = $("ul#menu li#"+$sid+" a.curtain-links").text(); //2
$("ul#menu li#"+$sid+" a").after("<span>"+$name+"</span>"); //3
});
tips.mouseout(function(e){
$("ul#menu span").remove(); //4
}); 
});

ざっくりとした解説というかメモ

1.li要素のidを取得して変数$sidに格納
2.取得したid内のa要素の文字を取得して変数$nameに格納
3.aタグの後ろにspan要素を作成
4.span要素を削除

例：メニュー2にマウスオーバーした場合。

1.li要素のid「menu02」を$sidに格納
2."ul#menu li#menu02 a.curtain-links"に該当するテキスト「メニュー2」を取得して変数$nameに格納
3."ul#menu li#menu02 a"の後ろにメニュー2を作成
4.マウスアウトとしたらメニュー2を削除