纯CSS:在悬停文本上方的中心工具提示

Question

小提琴看看我到目前为止:http://jsbin.com/udegux/1/edit

HTML

<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>

CSS:

.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display:inline;
  position:absolute;
  top: -25px;
  left: 30px;
}

如您所见,我目前通过指定"顶部"和"左侧"属性手动将悬停拖动提示居中于文本上.如果文本更长或更短,我将不得不手动更改这些值以使提示看起来居中.

我正在寻找一种方法,使用纯CSS自动将"拖动"一词置于短语"鼠标并拖动"之上.

Answer 1

更动态的解决方案：

.tooltip--top {
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%);
}

如果这是您正在使用的唯一工具提示类，请添加position: absolute;到它。

5px 是相对于父元素上边缘的偏移量。平常的东西。

Answer 2

如果将块放在文本的上方并在上面设置text-align: center,则不需要使用JavaScript.

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

JSBin.