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 Tooltips例如，一个你想要的自定义它，API允许你做几乎所有的事情，比如效果和鼠标跟踪。

它真的很容易使用：

在您的属性上设置标题：

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

而不是抛出工具提示事件：

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

看到这个小提琴并尝试一些东西！