纯CSS：中心工具提示上方文字悬停点。 2
在Pure CSS: Center Tooltip Above Text On Hover上展开 - 如果工具提示比所述容器更宽，如何让工具提示悬停在相对于其容器的中心？纯CSS：中心工具提示上方文字悬停点。 2
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;
}
这是最简单的使用CSS3转换的解决方案。
.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>迄今最eleegant的解决方案。大到亚！ – 2014-10-10 12:51:49
请在代码中尝试修改以下代码。
.drag-hint:hover > span {
display: inline;
position:absolute;
top: -25px;
left: 0;
right: 0;
text-align: center;
width:200px;
}
对不起，虽然工具提示的长度可能会改变，但应该没有固定的宽度。 – 2014-10-10 05:54:26
.drag-hint:hover > span {
display: table;
position: absolute;
top: -25px;
left: -51px;
right: 0;
text-align: center;
padding: 2px;
}
对不起，应该没有固定的位置，因为工具提示的宽度以及它们的容器可能会改变。 IE浏览器。 http://twitter.com/ – 2014-10-10 05:55:12
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;
}
对不起，但工具提示未居中。 – 2014-10-10 05:53:14
是的，@JonP是对的。 – 2014-10-10 05:53:57
更好，但我怀疑全宽度背景是需要的。 – 2014-10-10 06:01:12
div的使用，而不是跨
<div id="test" class="drag-hint"><div>drag drag drag drag drag</div>Hover me</div>
对不起，但工具提示未居中。参考问题中的图片。 – 2014-10-10 05:56:08
@JonP为什么downvote？对不起，因为图像似乎是不正确的路径在jsbin ... – HTTP 2014-10-10 05:57:41
你读过我的评论？这就是投票的原因，工具提示应该集中在目标上，而不是左对齐。 – 2014-10-10 05:59:32
请把你的代码在你的问题，不要让我们去寻找它。 – 2014-10-10 05:44:03
你想要它做什么？ – 2014-10-10 05:46:29
我忘了。不要给我一种态度@JonP。 – 2014-10-10 05:47:10