Extend span width base on content with position absolute - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Extend span width base on content with position absolute

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
li.tooltips {<!--from  w w  w.j av a  2 s  .  c  o m-->
   position:relative;
   display:inline;
}

li.tooltips span {
   position:absolute;
   color:Chartreuse;
   background:yellow;
   line-height:31px;
   text-align:center;
   visibility:hidden;
   border-radius:7px;
   font-weight:bold;
   white-space:nowrap;
   padding:6px 11px;
}

li.tooltips span:after {
   content:'';
   position:absolute;
   top:100%;
   left:51%;
   margin-left:-3px;
   width:0;
   height:0;
   border-top:9px solid blue;
   border-right:9px solid pink;
   border-left:9px solid OrangeRed;
}

li:hover.tooltips span {
   visibility:visible;
   opacity:0.9;
   bottom:31px;
   left:51%;
   margin-left:-77px;
   z-index:1000;
}
</style> 
 </head> 
 <body> 
  <br> 
  <br> 
  <br> 
  <br> 
  <ul class="booth26_34"> 
   <li class="tooltips"> <input type="radio" value="26" name="booth_nr" disabled=""> <span>Lorem ipsum dolor sit amet, consecte</span> </li> 
   <li class="tooltips"> <input type="radio" value="27" name="booth_nr" disabled=""> <span>Lorem ipsum dolor sit amet, consecte</span> </li> 
   <li class="tooltips"> <input type="radio" value="28" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="29" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="30" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="31" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="32" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="33" name="booth_nr"> <span>Lorem ipsum </span> </li> 
   <li class="tooltips"> <input type="radio" value="34" name="booth_nr"> <span>Lorem ipsum </span> </li> 
  </ul>  
 </body>
</html>

Related Tutorials