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/

添加了静态＆＃39; col-md-3，col-md-6和col-md-12中的类，因为bootstrap将位置更改为相对位置。通过将其更改为静态位置，您可以正确地移动工具提示。＆＃39;静态＆＃39;包含位置静态代码。

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

鼠标移动时的bootstrap工具提示 - 工具提示远离鼠标？

1 个答案: