如何仅使用 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 需要内联或内联块，以便段落不受干扰。

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

我一直让它居中于元素的左侧或以相对位置居中，但它占据了 space 它不应该出现在单词元素中。

Answer 1

好的 - 这应该有效。它将 .definition 元素的 left 位置设置为父元素宽度的 50%，然后 transform 会将其移回 .definition 元素宽度的 50%。

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>

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

How can I create a responsive tooltip with just css3?

html

css

jquery

tooltip