根据位置绝对值扩展跨度宽度

Question

I'm using a tooltip to show the users some info but if the text is longer the span would not expand to full width of the text as usual. i have a fiddle link http://jsfiddle.net/VJ7su/ if you hover the first check box you can see the text is forced down.

<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

You must to remove width and height from your tooltip + if you want the text to be displayed in one line just set 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;
}

Here the Demo

Answer 2

Add whitespace: nowrap; to the span CSS style.

Answer 3

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

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