Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Cómo crear tooltips de enlaces mediante CSS3 y JQuery

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Recientemente publicamos un tutorial sobre cómo crear herramientas informativas contextuales, conocidas como tooltips, con CSS3 y sin script... Hoy, estamos explicando una versión mejorada con script que es amigable con el SEO ¡y que usa un poco de magia jQuery para animar los tooltips a la posición del ratón!

Los tooltips emergentes se utilizan para mostrar información adicional cuando se coloca el ratón sobre un enlace. Cuando creamos enlaces en nuestro sitio web siempre es una buena práctica añadir títulos a los enlaces en beneficio del SEO. Estos títulos se muestran al pasar el cursor sobre un enlace, pero carecen de cualquier imagen de marca o estilo personalizado. En este tutorial te guiaré a través del proceso de:

  • Crear una forma de tooltip usando CSS3 puro y sin usar imágenes
  • Utilizar JQuery para mostrar el tooltip cuando se mantenga el ratón sobre el enlace
  • Establecer el contenido del tooltip de manera que coincida con el título del enlace
  • Animar el tooltip
  • Mostrarlo en relación a la posición del ratón

De esta manera vamos a mejorar la experiencia del usuario y al mismo tiempo mantendremos todo con aspecto agradable y limpio para los motores de búsqueda y beneficiaremos nuestro SEO.


Paso 1: Añadir el marcado HTML

Marcado del encabezado

Empecemos añadiendo primero el marcado dentro de la cabecera de nuestro documento. Hemos añadido dos hojas de estilo:
"style.css" y "tooltips.css". Puedes eliminar este último cuando desees implementar tu propio trabajo, pero de momento lo vamos a usar en la demostración. La hoja de estilos
"style.css" contiene todos los estilos CSS que darán formato a nuestro tooltip. También hemos añadido la referencia de la biblioteca Javascript de JQuery. Aquí está el marcado de la cabecera del documento.

Enlaces con el marcado de los tooltips

Ahora necesitamos añadir el marcado para los enlaces con tooltips. En mi enfoque para hacer que los enlaces muestren tooltips, necesitamos añadir un enlace con un atributo de clase
"tooltip_link". Esto aplicará estilo al tooltip básico y añadiremos un nombre de clase adicional de cualquiera de los siguientes
"left", "center" o "right" para especificar la posición de la flecha del tooltip alineada a la parte inferior izquierda, central o derecha respectivamente. Por último, añadimos algunos títulos a los enlaces que serán mostrados. Aquí está el marcado de los enlaces.

Marcado de los tooltips

Ahora necesitamos determinar cómo será el marcado del tooltip de manera que podamos crear nuestros estilos y código en base a él. Usaremos una etiqueta
"div" básica con el atributo de clase "tooltip" y uno de estos nombres de clase
"left""center" o "right". Dentro de ella, colocaremos el texto del tooltip. Aquí está el marcado del tooltip.


Paso 2: Aplicar estilo a los tooltips con CSS

En primer lugar, empezaremos aplicando estilo al enlace en si estableciendo su posición en "relative" para que podamos colocar el tooltip en relación a él.

Aplicar estilo al tooltip básico

Ahora tenemos que añadir el estilo CSS para el tooltip básico para lo cual vamos a utilizar el nombre de clase
"tooltip". Necesitamos ocultar el tooltip para que pueda mostrarse usando JQuery cuando el puntero esté pasando sobre el enlace, establece la posición en
"absolute" para que podamos establecer la posición relativa al enlace en si, establece el ancho a
200px, un relleno de 5px, un margen inferior de
12px para crear un espacio para la flecha, establecer el color del texto a white (blanco), z-index a
100 para colocarlo sobre todo el contenido, 100% desde la parte inferior, establece el color de fondo a
color azul transparente con algunos estilos de fuente y texto.

Ten en cuenta que puedes cambiar el estilo a lo que desees, la demostración va a utilizar estilos visuales intencionalmente sencillos en aras de la simplicidad.

Vamos a añadir el estilo general para la flecha del tooltip mediante el uso de pseudo elementos
"after" y "before". Aplicamos estilo al pseudo elemento "after" que formará la flecha completa de la izquierda, la derecha y la mitad de la flecha en el centro del tooltip estableciéndolo para que no tenga contenido, posición absoluta, establece el color del borde igual que usamos para el fondo del tooltip con ancho completo y
"-14px" desde la parte inferior del tooltip. El pseudo elemento "before" tiene casi el mismo estilo que el
pseudo elemento "after".

Aplicar estilo a la flecha izquierda, central y derecha del tooltip

Para aplicar estilo al tooltip con la flecha izquierda usamos la clase "left" y le damos estilo a la clase con un radio de borde en todas las esquinas excepto la de la parte inferior izquierda, luego le damos estilo al borde izquierdo y la posición desde el extremo izquierdo para el pseudo elemento "after". Para la flecha derecha simplemente cambiamos el radio del borde y establecemos el borde derecho y lo posicionamos desde la derecha. Para el tooltip con la flecha central vamos a establecer el radio del borde a todas las esquinas, ahora aquí tenemos que aplicar estilo tanto a
los pseudo elementos "after" y "before". El
pseudo elemento "after" tiene un borde izquierdo con el 50% de la anchura y
50% desde la izquierda, el pseudo elemento "before" tiene un borde derecho y un borde inferior transparente, con
50% de anchura y 50% desde la derecha.


Paso 3: Mostrar, animar y colocar contenido mediante JQuery

Para obtener la funcionalidad deseada necesitamos añadir nuestro código JQuery dentro de una etiqueta de script antes de la etiqueta de cierre de body. Usaremos eventos del ratón para determinar la funcionalidad que queremos crear.

Evento on mouse enter

El evento "mouseenter" se activa cuando el cursor del ratón entra en cualquier parte del elemento en cuestión, que en este caso es el
elemento del enlace o "a", esto solo funcionará cuando el enlace tenga más un número de caracteres superior a 0 en su atributo title. Aquí tenemos que hacer lo siguiente:

  1. Obtener la parte del atributo de nombre de clase que determinará el aspecto del tooltip (flecha izquierda, central o derecha).
  2. Obtener la posición X del cursor del ratón en relación con el enlace, no con la página.
  3. Obtener el atributo "title" que se mostrará dentro del tooltip.
  4. Anexar el marcado del tooltip. A continuación, añadiremos el nombre de clase y el título que obtuvimos antes.
  5. Establece la posición del tooltip desde la izquierda en función del nombre de la clase del tooltip (flecha izquierda, central o derecha).
  6. Por último, mostraremos el tooltip mediante el uso de un efecto de fundido en la animación que establecerá la propiedad de visualización (display) del tooltip en
    "block" y usaremos una duración para la animación de 300 mili segundos.

Evento on mouse leave

El evento "mouseleave" se activa cuando el cursor del ratón sale de la
"a" o elemento de enlace. En este atributo simplemente invertiremos todo lo que hemos hecho en
el evento "mouseenter". Obtendremos la parte del atributo de nombre de clase del enlace, luego desvaneceremos el tooltip estableciendo su propiedad "display" en
"none" y utilizaremos la duración de la animación a 300ms, después tendremos que retrasar las siguientes funciones para
300ms hasta que finalice la animación de desvanecimiento. Ahora para eliminar el marcado del tooltip tenemos que ponerlo dentro de una cola personalizada y luego tenemos que terminar nuestra cola usando
la función "dequeue" que permite que la cola principal siga funcionando.


Conclusión

Ahora tu resultado final debería parecerse a la imagen de abajo. Para que tu resultado final se vea exactamente como nuestra demostración debes utilizar los estilos dentro del archivo
"tut.css", pero siéntete libre de añadir tus propios ajustes.

Link Tooltips Using CSS3 and JQuery Final Preview

¡Espero que todos hayáis aprendido algunas técnicas en nuestro tutorial CSS y JQuery! Comparte tus pensamientos a continuación :)

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.