纯CSS：将工具提示置于悬停点文本上方的中心。2.

展开--如果工具提示比容器宽，如何使工具提示相对于容器居中悬停？

也就是说，（其中

拖动被切断）：


应显示为：


HTML:

在代码中尝试修改下面的代码

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


我明白你的问题

HTML
使用div而不是span

<div id="test" class="drag-hint"><div>drag drag drag drag drag</div>Hover me</div>

在我身上拖拽

我希望这能解决你的问题。
以下是使用CSS3转换的最简单解决方案



。拖动提示{
位置：相对位置；
利润率：50像素；
显示：内联块；
填充：0.1em；
边框：1px纯红；
/*供视觉参考*/
}
。拖动提示>跨距{
背景：黑色；
颜色：白色；
空白：nowrap；
显示：无；
}
.拖动提示：悬停>跨距{
显示：内联块；
位置：绝对位置；
顶部：-25px；
左：50%；
转化：translateX（-50%）；
文本对齐：居中；
}

拖拽
盘旋我
Lorem ipsum dolor sit amet，奉献精英。
将鼠标悬停在我面前
请将您的代码放入您的问题中，不要让我们去找它。您希望它做什么？我忘了。不要给我一个态度@JonP。如果需要，我们可以更改HTML吗？抱歉，但工具提示没有居中。更好，但我怀疑需要全宽背景。不错，但正如@JonP指出的，我们可能需要更改HTML，因为它需要一些与居中相关的东西，是吗@像这样的石头？有太多的方法可以达到你的目的。看起来很整洁。我想我会选那个。干杯，伙计！抱歉，应该没有固定的宽度，因为工具提示的长度可能会更改。抱歉，应该没有固定的位置，因为工具提示及其容器的宽度可能会更改。对不起，工具尖端没有居中。请参考问题中的图片。@JonP为什么投反对票？我很抱歉，因为图像在jsbin中的路径似乎不正确…你读过我的评论吗？这就是为什么否决票，工具提示应该集中在目标上，而不是左对齐。@JonP那么你看到了我的答案和你的评论发布的时间了吗？@HTTP值得的是，我高估了你的票数-非常感谢，男士：）这是迄今为止最优雅的解决方案。祝你好运！
.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
  width:200px;
 }

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

<h1>This:</h1>
    <div id="test" class="drag-hint"><p>drag drag drag drag drag</p>Hover me</div>
    <h1>Should appear as:</h1>
    <img src="http://s22.postimg.org/h1qk194bh/Untitled_2.jpg">

.drag-hint {
  position:relative;
  margin: 50px;
}
.drag-hint > p {
  background: black;
  color: white;
  width: 100%;
 display: none;
}
.drag-hint:hover > p {
  display: inline;
  position:absolute;
  top: -40px;
  left: 0;
  right: 0;
  text-align: center;
}

<div id="test" class="drag-hint"><div>drag drag drag drag drag</div>Hover me</div>