Question

我已创建自定义工具提示，以显示有关“标题”的详细信息。用户将鼠标悬停在其上时的元素。只有一个元素可以作为工具提示本身，所以即使有一个以上的标题＆＃39;元素，工具提示将跳转，显示当前鼠标的详细信息。

所需行为：工具提示需要弹出正确的标题＆＃39;元素，以便工具提示底部的箭头与标题元素的中心对齐。

实际行为：工具提示的位置大约为30px，这是用户第一次将鼠标悬停在任何给定的标题上。元件。如果用户将元素移除，然后返回到同一个元素，那么它将是正确的。请看下面的代码片段，看看我的意思。

为什么我第一次翻阅“标题”时工具提示无法正确定位？元件？

另外，如果工具提示中的文本都只包含一行，那么它似乎运行良好。

＆＃13;

$('.details').hide();
$('.title').mouseenter(function() {
  var el = $(this).attr('name'),
    eventPos = $('.title[name="' + el + '"]').offset(),
    yPos = (eventPos.top - ($('.details').outerHeight() + 5)) + 'px',
    xPos = ((eventPos.left + ($('.title[name="' + el + '"]').outerWidth() / 2)) - ($('.details').outerWidth() / 2)) + 'px';
  $('.details p').show().not('p:nth-child(' + el + ')').hide();
  $('.details')
    .css({
      top: yPos,
      left: xPos
    })
    .stop()
    .fadeIn('fast');
});

$('.title').mouseleave(function() {
  var el = $(this).attr('name');
  $('.details').fadeOut('fast');
})

＆＃13;

.container {
  text-align: center;
}

.title {
  display: inline-block;
  padding: 10px;
  background-color: red;
  margin-top: 150px;
}

.details {
  position: absolute;
  top: -300px;
  background: #fefefe;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px;
  z-index: 10;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.details:after,
.details:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.details:after {
  border-color: rgba(254, 254, 254, 0);
  border-top-color: #fefefe;
  border-width: 10px;
  margin-left: -10px;
}

.details:before {
  border-color: rgba(170, 170, 170, 0);
  border-top-color: #aaa;
  border-width: 11px;
  margin-left: -11px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="title" name="1">
    Title element 1
  </div>
  <div class="title" name="2">
    Title element 2
  </div>
</div>

<div class="details" id="1">
  <p>
    These are details about the main topic, shown as a blurb on hover.
  </p>
  <p>
    This is a blurb with two lines.
    <br> Why isn't the blurb positioned correctly when you first hover over?
  </p>
</div>

＆＃13;

Answer 1

发生的事情是，当您致电$('.details p').show().not('p:nth-child(' + el + ')').hide();时，您正在更改工具提示的outerHeight。但是，您的代码在移动发生前正在计算xPos和yPos，因此您的工具提示就像两个文本都显示一样。我将此行移动到函数的顶部（在计算位置之前），并且工具提示现在正常工作:)（以下示例）

＆＃13;

$('.details').hide();
$('.title').mouseenter(function() {
    var el = $(this).attr('name');
    $('.details p').show().not('p:nth-child(' + el + ')').hide();
    var eventPos = $('.title[name="' + el + '"]').offset(),
    yPos = (eventPos.top - ($('.details').outerHeight() + 5)) + 'px',
    xPos = ((eventPos.left + ($('.title[name="' + el + '"]').outerWidth() / 2)) - ($('.details').outerWidth() / 2)) + 'px';
  
  $('.details')
    .css({
      top: yPos,
      left: xPos
    })
    .stop()
    .fadeIn('fast');
});

$('.title').mouseleave(function() {
  var el = $(this).attr('name');
  $('.details').fadeOut('fast');
})

＆＃13;

.container {
  text-align: center;
}

.title {
  display: inline-block;
  padding: 10px;
  background-color: red;
  margin-top: 150px;
}

.details {
  position: absolute;
  top: -300px;
  background: #fefefe;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 10px;
  z-index: 10;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

.details:after,
.details:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.details:after {
  border-color: rgba(254, 254, 254, 0);
  border-top-color: #fefefe;
  border-width: 10px;
  margin-left: -10px;
}

.details:before {
  border-color: rgba(170, 170, 170, 0);
  border-top-color: #aaa;
  border-width: 11px;
  margin-left: -11px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="title" name="1">
    Title element 1
  </div>
  <div class="title" name="2">
    Title element 2
  </div>
</div>

<div class="details" id="1">
  <p>
    These are details about the main topic, shown as a blurb on hover.
  </p>
  <p>
    This is a blurb with two lines.
    <br> Why isn't the blurb positioned correctly when you first hover over?
  </p>
</div>

＆＃13;

动态居中的工具提示首先没有正确定位

1 个答案: