css dialox box to html li item

Question

Как я могу иметь любопытные диалоговые окна с пулей элемента li?

<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> 

(я могу изменить порядок де пролета, или положить информацию за пределами 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; 
} 

Я могу добавить тот квадрат с информацией рядом с де li, но он остается внутри контейнера.

Я хотел бы, чтобы это было как:

но для каждого элемента Li и всегда указывает на пули. Что меня больше всего осложняет, так это то, что я не смог получить информацию за пределами контейнера. , если я добавлю абсолютную позицию, тогда я бы не знал левого и верхнего полей, так как эти поля создаются php.

PS: это не всплывающая подсказка, похоже, она похожа на нее, но она всегда должна присутствовать, а не при наведении курсора или что-то еще.

thsnk youuu!

Answer 1

Вот что я сделал,

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

Этот CSS будет делать «информационное поле» вы ищете. Это просто начало, чтобы вы могли его подкрутить в любом случае. Если вы ищете только границу, а не сплошной цвет, я бы посоветовал вам использовать изображение. Возможно, я верю, но не очень эффектно/поддерживаю.

Вот JSFIDDLE с остальной частью css. Просто убедитесь, что li содержит .info: position: realtive;.