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>

将鼠标悬停在照片上时，只需简单的文字工具提示即可挣扎

1 个答案: