Tooltip usando sólo CSS

Ejemplo de Tooltip solo con CSS!

Ver el contenidoÉste es el contenido





En el Html  de la entrada pegar lo siguiente:

<span class="has-tooltip">Ver el contenido<span class="tooltip">Éste es el contenido</span></span>

Éste es el contenido: el texto a mostrar

Luego ir a Diseñador de plantillas ► Avanzado ► Añadir CSS ►Añadir código CSS personalizado

pega el código CSS

.tooltip {
display: block;
position: absolute;/* Ocultarlo */
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
max-width: 100%;/* ancho fijo */
z-index: 1;
left: 0;
bottom: 300%;
opacity: 0;
-webkit-transition: all .7s; /* transición */
-moz-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
background: white;
padding: 10px 1em;
border: 1px solid #ccc;/* El borde */
-webkit-box-shadow: 0 0 4px #ccc;/* La sombra */
-moz-box-shadow: 0 0 4px #ccc;
box-shadow: 0 0 4px #ccc;
}
.tooltip:before, .tooltip:after {/* flechas */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
position: absolute;
top: 100%;
left: 20px;
margin-left: -6px;
border-top-color: white;
z-index: 2;
}
.tooltip:before {/* La segunda flecha */
border-top-color: #ccc;
margin-left: -7px;
border-width: 7px;
z-index: 0;
}
.has-tooltip {
position: relative;
}
.has-tooltip:hover .tooltip {
clip: rect(auto auto auto auto);
clip: auto;
clip: inherit;
opacity: 1;
bottom: 100%;
}