Software Tutoriales WordPress

Como crear tooltips en WordPress mediante CSS

Tooltip Aplicar tooltips es relativamente sencillo en CSS, basta una simples líneas de código y conocer el modo de aplicarlo, para tener los tooltips en funcionamiento.

Se suele utilizar para mostrar información extra y personalizada al usuario de una página, no es nada intrusivo y aparece y desaparece en función del usuario, es decir, los tooltips son un tipo de notificaciones que se muestran al usuario cuando este pasa el cursor sobre una imagen, enlace externo, etc…, también se les conoce como “globos de ayuda”.

Para llevar a cabo esto, debemos incluir en nuestro fichoro de estilos “style.css” o el que tengas para el tema que tienes en tu blog, el siguiente código:

a:hover {background:#ffffff; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}

a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

El modo de empleo sería el siguiente:

<a class="tooltip" href="#">Texto del enlace<span>Escribe aquí el texto del tooltip</span></a>.