マウスの動きでブートストラップのツールチップ - ツールチップがマウスから遠くに現れる？

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>

任意のアイデア？上記のバグをどのように修正できますか？

注：あなたは私のコード（共有リンク）を使用し初めて1ですちなみに「フルページ」

Answer 1

上のコードを実行するときは、私が何を意味するかが表示されます。

これをよく試してください。 https://jsfiddle.net/cexzj7mm/1/

ブートストラップが相対位置に変更されたため、col-md-3、col-md-6およびcol-md-12に 'static'クラスが追加されました。位置を静的に変更することで、画像上にツールチップを適切に移動させることができます。 'static'には位置の静的コードが含まれます。

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'); 
});