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的中心位置？

我一直把它放在元素左边的中心或者以相对位置为中心，但是它占据的空间不应该在单词元素中。

Answer 1

好的 - 这应该有效。它将left元素的.definition位置设置为父级宽度的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创建响应式工具提示？

1 个答案: