css dialox box to html li item - css

Question

how can I have kinda like dialog boxes besite the bullet of a li element?
<div class="contentContenedor">
<div class="tituloContentContenedor">Box: Promociones nacionales</div>
<div class="linksContentContenedor">
<ul>
<li>
<span>Vuela barato por Chile</span>
<span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">612</span>
</li>
<li>
<span>Encántate con el sur de nuestro país</span>
<span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">102</span>
</li>
<li>
<span>Disfruta el norte de Chile</span>
<span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">64</span>
</li>
<li>
<span>Canjea tus kms. y vuela por Chile</span>
<span class="linksContentContenedorClicks" style="background-color:blue; color:white; float:right; padding:0px 4px 0px 4px">49</span>
</li>
</ul>
</div>
</div>
(I can change de order of the span, or put the info outside the li)
CSS:
.contentContenedor{
background-image:url('img/fondo_cajas_home.gif');
background-repeat:no-repeat;
background-position:center bottom;
width:270px;
height:140px;
}
.tituloContentContenedor{
background-image:url('img/fondo_tit_cajas_home_270_23.gif');
background-repeat:no-repeat;
width:270px;
height:23px;
color:white;
font:bold 11px Arial,Helvetica,sans-serif;
padding:6px 0px 2px 11px;
}
.linksContentContenedor{
font-size:12px;
text-decoration:underline;
color:#0267C3;
}
.linksContentContenedor ul{
padding:0;
margin:0;
margin-left:28px;
padding-bottom:10px;
}
.linksContentContenedor li span{
position:relative;
left:-5px;
}
.linksContentContenedorClicks{
position:absolute;
left:10px;
}
I'm able tu add a square with info beside de li element but it stays inside de container.
I'd like it to be like:
but for each li element and always pointing to the bullet.
what complicates me the most is that im not able to get the info outside the container.
if I add absolute position then I wouldnt know the left and top margins since, this boxes are php created.
PS: it is not a tooltip, kinda looks like it but it has to be always present, not when hovering or whatever.
thsnk youuu!

Answer 1

Here is what I did,
.info {
position: absolute;
right: 115%;
width: 60px;
height: 40px;
background: #c1c1c1;
text-align: center;
}
.info:before {
content: "";
height: 0;
width: 0;
position: absolute;
left: 100%;
border-left: 15px solid #c1c1c1;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
This css will make the "info box" you are looking for. This is just a start so you can tweek it in anyway you want. If you are looking for just a border and not solid color then I would advice you to use an image. It could be possible I believe but not very effect/supported.
Here is the JSFIDDLE with the rest of css. Just make sure the li containing the .info is position: realtive;.