html - 根据具有绝对位置的内容扩展跨度宽度

Question

我正在使用工具提示向用户显示一些信息，但如果文本较长，则跨度不会像往常一样扩展到文本的全宽。 我有一个 fiddle 链接http://jsfiddle.net/VJ7su/如果将鼠标悬停在第一个复选框上，您会看到文本被强制向下。

<ul class="booth26_34">
<li class="tooltips"><input type="radio" value="26" name="booth_nr" disabled=""><span>AIT Austrian Institute of Technology</span></li>

<pre>
li.tooltips {
  position: relative;
  display: inline;
}
li.tooltips span {
  position: absolute;
  width:auto;
  color: #FFFFFF;
  background: #000000;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  font-weight:bold;
}
li.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -2px;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
li:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
</pre>

Answer 1

您必须从工具提示中删除宽度和高度 + 如果您希望文本显示在一行中，只需设置 white-space:nowrap

CSS

li.tooltips span {
  position: absolute;
  color: #FFFFFF;
  background: #000000;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  font-weight:bold;
  white-space:nowrap;
  padding: 5px 10px;
}

这里是 Demo