jquery - 如何仅使用 css3 创建响应式工具提示？

Question

所以我在段落中有一个词会有工具提示。

<div>
  lorem 
  <div class="word">
    ipsum
    <div class="definition">this will be the tooltip text</div>
  </div> 
  blah blah blah
</div>

现在使用 jQuery，我将 definition 元素设置为在鼠标悬停时可见。

单词 ipsum 将是一个动态单词，定义将是一组动态单词。我需要将定义置于 ipsum 之上，同时以单词 ipsum 为中心并进行填充。

ipsum 需要内联或内联 block ，以便段落不受干扰。

如何仅使用 css 使定义元素以动态大小完美地位于单词 ipsum 的中心？

我一直让它居中在元素的左侧或以相对位置居中，但它占用了它不应该在单词元素中的空间。

Answer 1

好的 - 这应该可以。它将 .definition 元素的 left 位置设置为父级宽度的 50%，然后 transform 将其向后移动 50% .definition 元素的宽度。

body {padding:50px} /* for demonstration */

.word {
  display: inline-block;
  position: relative;
  background-color: lightyellow;
}

.definition { 
  display: none;
}

.word:hover > .definition {
  display: inline-block;
  position: absolute;
  bottom: 100%;
  left: calc(50%);
  transform: translateX(-50%);
  padding: 3px;
  border: 1px solid blue;
  white-space: nowrap;
}

<div>
  lorem 
  <div class="word">
    ipsum
    <div class="definition">this will be the tooltip text</div>
  </div> 
  blah blah blah
</div>