ツールチップ 2- ツールチップをマウスの動きに合わせてみよう
Webサイトを作成するには、まずは HTML をマークアップします。そして CSS を使ってデザインを施していきます。
そして最近では、Webデザインをもっと素敵にするために、jQuery を利用する機会も増えてきました。
mousemove()メソッドのイベントオブジェクトを利用して、ツールチップの座標を操作しています。結果、マウスの動きにツールチップが追従するようになります。
jQuery Code
$(function() {
$(".tooltip").each(function(){
var toolTip = $('<div class="tooltip-body">');
var toolTipText = $(this).attr("data-tooltip");
toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();
$("body").append(toolTip);
$(this).hover(function(){
toolTip.stop().fadeTo("fast", 1);
},
function(){
setTimeout(function(){
toolTip.stop().fadeOut("fast");
}, 1000);
})
.mousemove(function(e){
var toolTipHeight = toolTip.height();
toolTip.css({
"position": "absolute",
"z-index": "9999",
"top": e.pageY - toolTipHeight -20 + "px",
"left": e.pageX -20 + "px"
});
});
});
});