jqueryでmousemoveで追従するツールチップを作成したときに、ツールチップの要素がやたらチカチカする。
原因が分からず悩んでいたところ、どっかのサイトで見たが忘れてしまったが、マウスムーブでツールチップが移動しているときの座標をマウスポインターの位置を下記のように設定した。
$(要素).mousemove(function(e){
var t=$(ツールチップの要素);
var dx=e.clientX;
var dy=e.clientY;
var h=120;
var w=$(t).innerWidth()/2;
$("div#result").html(dx+" : "+dy);
//
$(t).css({"top":dy+"px","left":dx+"px"});
});
上記のよう設定するとイベント発生時にマウスポインタの位置とツールチップの位置が同じになるのでチカチカするようだ。
特にプログラム的に間違っているわけではないが、さすがにチカチカするので。
はやい話が、「マウスポイントの位置より数ピクセル離す」ってことで下記のようにマウスポインターから離せばいい。
$(要素).mousemove(function(e){
~省略~
//
$(t).css({"top":dy+10+"px","left":dx+10+"px"});
});