jquery - 将鼠标悬停在照片上时遇到简单的文本工具提示

Question

我想在没有插件的情况下使用 jQuery 来做到这一点。我想在将鼠标悬停在图像上时保持恒定的工具提示。

如有任何帮助，我们将不胜感激。非常令人沮丧。谢谢!

HTML

    <div class = "runners">
                <h1> Hover to see famous runners</h1>
                <img id = "mo-farah" src="Images/mo-farah.jpg" title = "Mo Farah">
                <img id="paula-radcliffe" src="Images/paula-radcliffe.jpg" title = "Paula Radcliffe">
                <img id = "wilson-kipsang" src="Images/wilson-kipsang.jpg" title = "Wilson Kipsang">

</div>

jQuery

    $(document).ready(function() {
    xOffset = 10;
    yOffset = 20;
    $("body").append("<p class = 'runners' id='tooltip'></p>");
    $(document).mousemove(function(evt){
    $("#tooltip")
        .css("top", (evt.pageY + yOffset) + "px")
        .css("left", (evt.pageX + xOffset) + "px"); 
    });

});

编辑

我已经更改了我的 HTML 和 jQuery 以尝试适应您所说的内容。但还是没有喜悦。有什么建议吗？

jQuery

$(document).ready(function() {
    this.tooltip = function(){          
    xOffset = 10;
    yOffset = 20;       
    $("div").hover(function(e){                             
      this.t = this.title;
      this.title = "";                                    
      $("body").append("<p id='tooltip'>"+ this.t +"</p>");
      $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");        
        },
    function(){
      this.title = this.t;      
      $("#tooltip").remove();
        });             
      };

    $(document).ready(function(){
      tooltip();
    });

});

HTML

<div class = "runners">
    <h1> Hover to see famous runners</h1>
    <img id = "mo-farah" src="Images/mo-farah.jpg" title = "Mo Farah">
    <img id="paula-radcliffe" src="Images/paula-radcliffe.jpg" title = "Paula Radcliffe">
    <img id = "wilson-kipsang" src="Images/wilson-kipsang.jpg" title = "Wilson Kipsang">
</div>

Answer 1

您的工具提示不包含任何文本，因此根本不可见。此外，您没有提供任何 CSS，但工具提示当然必须绝对定位。

你需要进一步实现的是:

• 仅当将鼠标悬停在需要显示的元素上时才显示工具提示
• 离开这样的元素时隐藏工具提示
• 根据鼠标悬停在哪个元素上更改工具提示内容

---

$(document).ready(function() {
    xOffset = 10;
    yOffset = 20;
    $tooltip = $("<p class='runners' id='tooltip'>Tooltip text</p>").hide().appendTo(document.body);
    
    // the callback function handling the tooltip movement
    function moveTooltip(evt){
      $tooltip
        .css("top", (evt.pageY + yOffset) + "px")
        .css("left", (evt.pageX + xOffset) + "px"); 
    }
    
    $('[data-tooltip]').on('mouseenter', function() {
      // register mousemove event handler
      $(document).on("mousemove.tooltip", moveTooltip);
      // set tooltip content from data attribute
      $tooltip.html($(this).attr('data-tooltip'));
      // show tooltip
      $tooltip.show();
    });
    
    $('[data-tooltip]').on('mouseleave', function() {
      // un-register mousemove event handler
      $(document).off("mousemove.tooltip");
      // hide tooltip
      $tooltip.hide();
    });

});

#tooltip {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "runners">
  <h1> Hover to see famous runners</h1>
  <img id="mo-farah" src="Images/mo-farah.jpg" title="Mo Farah" data-tooltip="Tooltip Content 1">
  <img id="paula-radcliffe" src="Images/paula-radcliffe.jpg" title= "Paula Radcliffe" data-tooltip="Second Tooltip Content">
  <img id="wilson-kipsang" src="Images/wilson-kipsang.jpg" title="Wilson Kipsang" data-tooltip="And now for something <em>completely</em> different.">
</div>