Question

我正在尝试为导航栏创建工具提示，代码如下。我想让div跟随鼠标光标，实现这个功能需要哪个功能？

$('div#navigation a').hover(function() {
    $('div#tooltip').fadeIn(500)
}, function() {
    $('div#tooltip').fadeOut(100)
});

Answer 1

在mousemove上获取鼠标event坐标pageX和pageY

var $tooltip = $("#tooltip");

$(document).on("mousemove", function(evt) {
  $tooltip.css({left: evt.pageX, top: evt.pageY});
});

#tooltip{position:absolute;background:red;width:20px;height:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tooltip"></div>

使用jQuery悬停时的工具提示

这是一个基本的插件示例

(function($) {

  var moveTooltip = false,
      $tooltip = $("<div/>", {
        appendTo: "body",
        id: "tooltip",
        css: {
          position:"absolute",
          display:"none",
          zIndex:99999,
          maxWidth:160,
          padding:10,
          background:"#eee"
        }
      });

  $(document).mousemove(function(ev) {
    if(!moveTooltip) return;
    $tooltip.css({top: ev.pageY+15, left: ev.pageX+15});
  });

  $.fn.tooltip = function() {  
    return this.each(function(){
      $(this).hover(function() {
        moveTooltip = true;
        $tooltip.html($(this).data('tooltip')).fadeTo(300, 1);        
      },function(){
        moveTooltip = false;
        $tooltip.hide();
      });
    });
  };

}(jQuery));


$("nav a").tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#" data-tooltip="This is my title 1">Link 1</a></li>
    <li><a href="#" data-tooltip="This is my title 2 ">Link 2</a></li>
    <li><a href="#" data-tooltip="<b>This</b> is my title 3.<br>A new line">Link 3</a></li>
  </ul>   
</nav>

注意：您可能希望进一步改进限制工具提示位置到视口边界的代码，您明白了。

Answer 2

当hover()事件被触发时，您需要获取鼠标位置的详细信息。了解这些详细信息后，您可以相应地定位工具提示。

使用以下CSS代码来定位元素：

#tooltip {
    position: absolute;
    display: none;
}

现在您已经完成了这项工作，修改您的jQuery代码以将工具提示放在鼠标所在的位置，然后在他们鼠标移出导航div时将其淡出：

$('div#navigation a').hover(function(e) {
        var yPos = e.pageY;
        var xPos = e.pageX;
        $('div#tooltip').css({ top: yPos, left: xPos }).fadeIn(500)
    },
    function() {
        $('div#tooltip').fadeOut(100)
});

我为你拼凑了一个快速的jsFiddle：http://jsfiddle.net/aNRJW/

如何使div跟随光标？

2 个答案:

使用jQuery悬停时的工具提示