Cómo crear tooltips en WordPress mediante CSS…
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>.
Muy útil y limpio vuestro tooltip y sin necesidad de Javascript o alguna librería JQuery que está muy de moda ahora.
Lo estoy usando en mi website =)
Por cierto, da error al tratar de conectarse vía Facebook a DISQUS para los comentarios.
Gracias por el aviso sobre la conexión desde disqus con facebook, trataré de averiguar el error y lo comunicaré a disqus para que verifiquen.
Me alegro que te haya gustado la entrada y que la estés aplicando en tu web ;).
Saludos