Question

我想要的是：当光标移动到“tip1”上方时，显示“ this is my tip1 ”的框将跟随光标。

实际显示的内容：当光标在“tip1”上方时，显示“ this is my tip1 ”的框在“tip1”下。

代码：

$(function() { var x = 10; var y = 20; $("a.tooltip").mouseover(function(e) { this.myTitle = this.title; this.title = ''; var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip") .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function() { this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function(e) { $("#tooltip") .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <a href="#" class="tooltip" title="this is my tooltip1">tip1.</a> </p>

Answer 1

您可以使用解决方案https://jsfiddle.net/6t7k96bt/1/

＆＃13;

$(function () {
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function (e) {
      this.myTitle = this.title;
      this.title = '';
      var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
      $("body").append(tooltip);
      $("#tooltip")
              .css({
                  "top": (e.pageY + y) + "px",
                  "left": (e.pageX + x) + "px"
              }).show("fast");
  }).mouseout(function () {
      this.title = this.myTitle;
      $("#tooltip").remove();
  }).mousemove(function (e) {
      $("#tooltip")
              .css({
                  "top": (e.pageY + y) + "px",
                  "left": (e.pageX + x) + "px"
              });
  });
});

＆＃13;

#tooltip{
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="tooltip" title="this is my tip1">tip1.</a></p>

＆＃13;

您忘记将css添加到工具提示div。将位置添加为absolute。

希望这会奏效。

Answer 2

«我想要在“tip1”旁边显示框

确定...然后使用span代替div ...
并使用.after()代替.append。

它会在“{1}}内添加您的邮件，紧接在”tip1“之后。

$(function () {
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function (e) {
    this.myTitle = this.title;
    this.title = '';
    //var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
    var tooltip = "<span id='tooltip'>"+this.myTitle+"</span>";
    //$("body").append(tooltip);
    $(".tooltip").after(tooltip);
    $("#tooltip")
      .css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    }).show("fast");
  }).mouseout(function () {
    this.title = this.myTitle;
    $("#tooltip").remove();
  }).mousemove(function (e) {
    $("#tooltip")
      .css({
      "top": (e.pageY + y) + "px",
      "left": (e.pageX + x) + "px"
    });
  });
});

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="link">
    <a href="#" >tip1.</a>
    <div class="tootltip">
        <div class="tootltip-arrow"></div>
    This is tip1
    </div> 
</div> 

<style type="text/css">
.tootltip{
    background-color: rgba(76, 76, 76, 0.62);
    max-width: 100px;
    max-height: 50px;
    padding: 5px 5px 5px 5px;
    width: auto;
    height: auto;
    color: white;
    position: absolute;
    display: none;
}
.tootltip-arrow
{
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(76, 76, 76, 0.62);
    position: absolute;
    margin-top: -15px;
}

</style>
<script type="text/javascript">
    $(".link").mouseover(function(e)
    {
        var tootltip = $(this).find(".tootltip");
        tootltip.css("display","block");
    });

    $(".link").mouseout(function(e)
    {
        var tootltip = $(this).find(".tootltip");
        tootltip.css("display","none");
    });

</script>
</body>

jquery mouseover - 盒子没有移动跟随鼠标

3 个答案: