纯CSS：中心工具提示高于文本悬停pt。 2

Question

扩展Pure CSS: Center Tooltip Above Text On Hover - 如果工具提示比所述容器宽，如何使工具提示悬停相对于其容器居中？

http://jsbin.com/idudal/24/edit

IE中。这个（drag drag drag被切断的地方）：

应该显示为：

HTML：

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

CSS：

.drag-hint {
  position:relative;
  margin: 50px;
}
.drag-hint > span {
  background: black;
  color: white;
  white-space: nowrap;
  display:none;
}
.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

Answer 1

这是使用CSS3转换的最简单的解决方案。

JSfiddle Demo

.drag-hint {
  position: relative;
  margin: 50px;
  display: inline-block;
  padding: 0 1em;
  border: 1px solid red;
  /* for visual reference */
}
.drag-hint > span {
  background: black;
  color: white;
  white-space: nowrap;
  display: none;
}
.drag-hint:hover > span {
  display: inline-block;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

<span class="drag-hint">
    <span>drag drag drag drag drag</span>
Hover me</span>


<span class="drag-hint">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
Hover me</span>

Answer 2

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

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

Answer 3

JS Bin

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

Answer 4

JS Bin

我实现了你的问题。

HTML

<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">

CSS

.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;
}

Answer 5

我希望这能解决你的问题。 http://jsbin.com/xihupeyowize/1/

Answer 6

使用div而不是span

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

a fiddle here