javascript - JQueryを使用したマウス位置に基づく位置タグ

Answer 1

CSS3 を使用する場合: CSS3 LIVE DEMO (マウスには追従しません ... でもちょっと!)

---

jQuery の場合:

• を使用して内部をa持つ要素を追跡できますb.has()
  
• CSSで#tooltip要素を準備し、それをjQueryでDOMに追加するよりも
  
• mouseenter、、を追跡するよりも、ツールチップの外観と動きをmouseleave行いmousemoveます

LIVE DEMO

$(function(){ // DOM ready

    $('body').prepend('<div id="tooltip" />');
    $tool = $('#tooltip');
    var toolW = $tool.outerWidth(true) / 2; // w/2 to make it always horiz. centered

    $('.controller a').has('b').on('mouseenter mouseleave', function( e ){

      var opac = e.type=='mouseenter' ? 1 : 0 ;
      var text = $('b', this).text();
      $tool.text(text).stop().fadeTo(300,opac, function(){
          if(opac===0)$tool.hide(); // if mouseleave make sure to hide tooltip
      });

    }).on('mousemove', function( e ){

       var mPos = {X: e.clientX, Y:e.clientY};
       $tool.css({left: mPos.X-toolW, top: mPos.Y+15});

    });

});

CSS:

.controller a b {      
  display:none;      
}

#tooltip{
  z-index:1000;
  width:180px;
  padding:10px;
  border-radius:10px;
  box-shadow:0 0 3px #666;
  display:none;
  position:absolute;
  background:rgba(255,255,255,0.7)
}

Answer 2

たとえば、jQuery UI ツールチップを使用して、必要に応じてカスタマイズしてみませんか。APIを使用すると、エフェクトやマウス トラッキングなど、ほぼすべての操作を実行できます。

使い方はとても簡単です:

属性にタイトルを設定します:

<a href="#about" class="arrows" id="aboutarrow" title="about">
    <b id="aboutarrow">About</b>
</a>

そして、ツールチップイベントをスローするより:

$(function() {
    $( document ).tooltip({
      track: true
    });
});

このフィドルを見て、いくつか試してみてください!