Question

我正在使用工具提示向用户显示一些信息，但如果文本较长，则跨度不会像往常一样扩展到文本的全宽。我有一个小提琴链接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

Answer 2

将whitespace: nowrap;添加到span CSS样式。

Answer 3

li.tooltips:first-child span {
     left: -133px;
}
li.tooltips:nth-child(2) span {
    left: -135px;
 }

http://jsfiddle.net/VJ7su/11/

基于位置绝对的内容扩展跨度宽度

3 个答案: