Tooltips con CSS en el blog

Para poner y personalizar un Tooltips en el blog tenemos que:

En el HTML de la entrada ponen

<a href="#" title="TEXTO EXPLICATIVO del TOOLTIP " class="tooltip">Texto</a>

Ir a

• Plantilla
• Personalizar 
• Diseñador de Plantillas
• Avanzado
• Añadir CSS, en ese recuadro van a añadir el siguiente Código CSS:

/*tooltip
---------*/
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after {
bottom: 26px;
content: attr(title); /* texto mostrado */
left: 20%;
position: absolute;
z-index: 98; /* formato gráfico */
background: #ffff00; /* color de fondo */
border-radius: 5px;
color: #000; /* color del texto */
font-family: courier;
font-size: 12px;
padding: 5px 15px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 150px;
}
.tooltip:hover:before {
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
border: solid;
border-color: rgba(255,255,255, 0.2) transparent;
border-width: 6px 6px 0 6px;
}

Texto