Este es un modelo de tooltip animado con CSS3, que funciona en todos los navegadores. Es el que uso yo para mostrar la cajita cuando pasas el ratón por encima del autor de un comentario (sólo funciona en los comentarios nuevos porque usamos la api de gravatar), cuando votas un post o un comentario, etc.

El truco es ocultarlo usando la propiedad clip junto con position: absolute para ocultarlo, y mostrarlo restaurando la posición, y animando la opacidad con CSS3.

Usamos pseudoelementos para las flechas, y varios valores de la propiedad clip para que funcione en todos los navegadores.

Forma de uso

La forma de uso es una etiqueta cualquiera con la clase has-popup, con una etiqueta cualquiera con la clase popup. Por ejemplo:

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

Que produciría el siguiente resultado: Ver el contenido Éste es el contenido

El CSS

El código CSS es el siguiente:

.popup {
	display: block;

	/* Ocultarlo */
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);

	/* Darle un ancho fijo */
	max-width: 100%;

	/* 
	 * Posición:
	 * en este caso movemos el popup hacia la izquierda y hacia arriba, y lo reposicionamos cuando lo mostramos
	 */
	z-index: 1;
	left: 0;
	bottom: 300%;

	/* Efecto con la opacidad */
	opacity: 0;

	/* La transición */
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;

	/*
	 * Aspecto
	 */
	background: white;

	/* Chrome tiene algunos problemas con paddings en em para mostrar las flechas en la posición correcta, así que usaremos pixels */
	padding: 10px 1em;

	/* El borde y la sombra */
	border: 1px solid #ccc;
	-webkit-box-shadow: 0 0 4px #ccc;
	-moz-box-shadow: 0 0 4px #ccc;
	box-shadow: 0 0 4px #ccc;
}
/* Las flechas */
.popup:before, .popup:after {
	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;
}
/* La segunda flecha que hace el efecto de borde */
.popup:before {
	border-top-color: #ccc;
	margin-left: -7px;
	border-width: 7px;
	z-index: 0;
}

/* Para posicionar el popup respecto al padre */
.has-popup {
	position: relative;
}

/* Lo mostramos: Restauramos la posición y la opacidad para hacer el efecto */
.has-popup:hover .popup {
	/* 
	 * IE7- no admite auto
	 * IE8 usa con auto igual que rect(auto, auto, auto, auto). Usamos inherit
	 * Además, así es accesible ;)
	 */
	clip: rect(auto auto auto auto);
	clip: auto;
	clip: inherit;
	opacity: 1;
	bottom: 100%;
}

Compatibilidad

El CSS está diseñado para que funcione con todos los navegadores. La animación se verá en IE 10, y el resto de los navegadores que no se llaman Internet Explorer.
La sombra también se verá en IE9. La flecha se verá a partir de IE8 (incluido).

20 pensamientos en “Tooltip animado sólo con CSS3

    • Imagen de Emilio Cobos Álvarez el dijo:

      No se si lo he entendido bien: ¿Quieres que la imagen aparezca en un tooltip, pero no puedes hacerlo por el resumen con javascript no?

      Si es así (y teniendo en cuenta que en la entrada a tu blog sólo tienes la imagen, te recomiendo probar los resúmenes sin javascript). Si decides usarlos, puedes hacerlo mucho más fácilmente. Si no, cambia en el CSS .popup por .post-body, y .has-popup por .post

      • Imagen de Emilio Cobos Álvarez el dijo:

        Vale, prueba a poner el primer código de aquí encima de </head>, y a poner el <b:includable id='post' var='post'> así (te recomiendo usar un blog de pruebas, por si acaso ;)). Recueda incluir el post-footer donde se indica:

          <div class='post' expr:id='data:post.id'>
            <b:if cond='data:blog.pageType == "item"'>
                <h1 class='post-title entry-title'><data:post.title /></h1>
                <div class='post-body entry-content'>
                    <data:post.body />
                </div>
                <div class='post-footer'>
                    <!-- Aquí el post-footer como lo tengas -->
                </div>
            <b:else />
                <div class='has-tooltip'>
                    <script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,150));</script>
                    <noscript><a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl' expr:alt='data:post.title' /></a></noscript>
                    <div class='tooltip'><h2 class='post-title entry-title'><data:post.title /></h2><p class='entry-content'><data:post.snippet /></p></div>
                </div>
            </b:if>
          </div>

        Es posible que después de esto, tengas que cambiar algunas cosillas en el CSS, o ajustar las clases del código que he proporcionado, pero valdría como base.

  1. Imagen de MarcosMarcos el dijo:

    Hola emilio,

    Muy bueno el efecto. Sólo una pregunta. ¿Cómo puedo modificar el ANCHO del tolltip? a mi me funciona perfectamente, pero necesitaria que el tootip tuviera por lo menos 300 pixeles de ancho. el mensaje que he de mostrar en un poco lardo en alguna ocasión y me queda demasiado vertical. ¿ Se puede hacer?

    Gracias!

  2. Imagen de CarlosCarlos el dijo:

    Emilio me sirvió mucho tu código, pero tengo un problemita de implementación. En la web que estoy haciendo necesito que el ancho sea fijo pero el alto dinámico, ya que se mostrará en distintas áreas (es un calendario de eventos). El problema se viene en que si no asigno una altura me despliega perfectamente el texto pero el fondo de la caja solo se muestra hasta la primera línea, si modifico la opción -position:absolute;- por -position:static;- si que se adapta a la altura dinámicamente pero el texto de la etiqueta has-pop se muestra en la misma posición z-index y se confunde con el texto del popup. Por más que aumente el valor del z-index del popup sigue mostrándolo igual. Alguna sugerencia??

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.