Habillage type "info-bulle" exclusivement en css

css permet des styles de plus en plus évolués. En particulier, avec les méthodes ::before et ::after qui permettent d'encadrer le comportement d'éléments.
On peut ainsi concevoir par exemple des "info-bulles" exclusivement en css. Un gain en poids / réactivité est assez net par rapport à des méthodes reposant sur javascript ou jquery.

Style css:

.Indic{position:relative;cursor:help;display:inline-block}
.Indic span{color:#FFFFFF;background-color:#000080;
  position:absolute;top:-10px;left:5px;z-index:999;
  min-width:300px;margin-left:0;padding:10px;border:2px solid#ccc;opacity:.9;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius:4px;border-radius: 4px;
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4)}
.Indic span:before, .Indic span:after{content:"";font-size:0;
  position:absolute;z-index:1000;top:8px;left:-10px;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:0px solid red;
  border-right:15px solid #000080}
.Indic span:before{border-right-color:#ccc;left:-12px}

et le html:

Habillage de type info-bulle<div class="Indic"><span>
    exclusivement réalisé en <code>css</code></span></div>.

Affichage:


    Habillage de type info-bulle

    exclusivement réalisé en css
    Voir les éléments de code ci-dessus
    .