鼠标移动时的引导工具提示 - 工具提示远离鼠标出现？

Question

我有一个图像列表，我希望工具提示出现，并在鼠标悬停图像时跟随鼠标。在此之后answer。我修改了代码，以便可以将它用于多个图像。但是有时候工具提示出现非常远离远离鼠标，有时可以。为什么？

工具提示也会闪烁。为什么？

.grid-item { 
 
    display: block; 
 
    margin: 5px; 
 
    border: 1px solid red; 
 
} 
 

 
.col-lg-1, 
 
.col-lg-10, 
 
.col-lg-11, 
 
.col-lg-12, 
 
.col-lg-2, 
 
.col-lg-3, 
 
.col-lg-4, 
 
.col-lg-5, 
 
.col-lg-6, 
 
.col-lg-7, 
 
.col-lg-8, 
 
.col-lg-9, 
 
.col-md-1, 
 
.col-md-10, 
 
.col-md-11, 
 
.col-md-12, 
 
.col-md-2, 
 
.col-md-3, 
 
.col-md-4, 
 
.col-md-5, 
 
.col-md-6, 
 
.col-md-7, 
 
.col-md-8, 
 
.col-md-9, 
 
.col-sm-1, 
 
.col-sm-10, 
 
.col-sm-11, 
 
.col-sm-12, 
 
.col-sm-2, 
 
.col-sm-3, 
 
.col-sm-4, 
 
.col-sm-5, 
 
.col-sm-6, 
 
.col-sm-7, 
 
.col-sm-8, 
 
.col-sm-9, 
 
.col-xs-1, 
 
.col-xs-10, 
 
.col-xs-11, 
 
.col-xs-12, 
 
.col-xs-2, 
 
.col-xs-3, 
 
.col-xs-4, 
 
.col-xs-5, 
 
.col-xs-6, 
 
.col-xs-7, 
 
.col-xs-8, 
 
.col-xs-9 { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    padding: 0; 
 
} 
 

 
.flex-centre { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    text-align: center; 
 
    /*height: 100%; 
 
     width: 100%;*/ 
 
} 
 

 
ul li { 
 
    margin: 10px; 
 
} 
 

 
.img-tooltip { 
 
    position: absolute; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-md-3"> 
 
     <div class="col-md-12"> 
 
     <a href="#" class="grid-item"> 
 
      <img class="img-responsive img" src="http://placehold.it/800x1240" alt=""> 
 
      <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 1" data-animation="false" data-trigger="manual"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="col-md-12"> 
 
     <a href="#" class="grid-item"> 
 
      <img class="img-responsive img" src="http://placehold.it/800x603" alt=""> 
 
      <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 2" data-animation="false" data-trigger="manual"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-3"> 
 
     <div class="col-md-12"> 
 
     <a href="#" class="grid-item"> 
 
      <img class="img-responsive" src="http://placehold.it/800x600" alt=""> 
 
      <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"></i> 
 
     </a> 
 
     </div> 
 
     <div class="col-md-12"> 
 
     <a href="#" class="grid-item"> 
 
      <img class="img-responsive" src="http://placehold.it/800x600" alt=""> 
 
      <i class="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip 3" data-animation="false" data-trigger="manual"></i> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</div> 
 

 

 
<script type="text/javascript"> 
 
    $(".img").on('mousemove', function(e) { 
 
    var context = $(this).parent(); 
 
    $(".img-tooltip", context).css({ 
 
     top: e.pageY, 
 
     left: e.pageX 
 
    }); 
 
    $('[data-toggle="tooltip"]', context).tooltip('show') 
 
    }) 
 

 
    $(".img").on('mouseleave', function(e) { 
 
    var context = $(this).parent(); 
 
    $('[data-toggle="tooltip"]', context).tooltip('hide') 
 
    }) 
 
</script>

任何想法？我如何解决上面的这些错误？

注意：你会明白我的意思是，当你运行“整页显示”

Answer 1

代码到你是第一个有史以来谁用我的代码（您共享的链接）的方式。

试试这个。 https://jsfiddle.net/cexzj7mm/1/

在col-md-3，col-md-6和col-md-12中添加了'static'类，因为bootstrap将position改为relative。通过将其更改为静态位置，您可以正确移动工具提示。 '静态'包含位置静态代码。

CSS

.static { 
    position: static; 
} 

HTML

<div class="col-md-3 static"> 
<div class="col-md-12 static"> 
    ... 

，我也做了JavaScript的一些改进。

的JavaScript

$(".img").on('mousemove', function(e) { 
    var tooltip_I_Tag = $(this).next(); 
    var position = (tooltip_I_Tag.attr("data-placement") != "") ? tooltip_I_Tag.attr("data-placement") : "right"; 
    var top = 0; 
    var left = 0; 
    if (position == "right") { 
    top = +10; 
    left = +10; 
    } else if (position == "left") { 
    top = +10; 
    left = -10; 
    } else if (position == "top") { 
    top = 0; 
    left = 0; 
    } else if (position == "bottom") { 
    top = 20; 
    left = 0; 
    } 
    tooltip_I_Tag.css({ 
    top: (e.pageY + top), 
    left: (e.pageX + left) 
    }); 
    tooltip_I_Tag.tooltip('show'); 
}); 

$(".img").on('mouseleave', function(e) { 
    $($(this).next()).tooltip('hide'); 
});