Search code examples
csstooltiphtml-lists

css dialox box to html li item

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:

a busy cat

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!

Solution

  • 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;.