• Saltar a la navegación principal
  • Saltar al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Gratis
  • Acceder
  • Suscríbete ahora

Plugin para añadir tooltips al contenido de WordPress

El otro día un alumno de la academia me preguntó cómo podía hacer para añadir tooltips en sus artículos.

Un tooltip es un pequeño mensaje que aparece cuando se pasa el cursor del ratón sobre un elemento de una interfaz de usuario, como puede ser un texto, un botón o un enlace.

Por lo general, un tooltip se usa para proporcionar una descripción adicional o una ayuda contextual para ese elemento, de manera que el usuario pueda comprender mejor su función.

Pero como una imagen vale más que mil palabras, a esto me refiero:

Ejemplo de título.

Aclarado esto, vamos a crear un plugin que añada un shortcode capaz de generar esos tooltips.

1- Creamos la estructura del plugin

Lo primero que tenemos que hacer es crear una carpeta nueva para nuestro plugin, la cual voy a llamar scv-tooltips y dentro de ese directorio crearemos el archivo principal del plugin, llamado scv-tooltips.php.

A ese archivo le añadimos su cabecera:

<?php
/*
* Plugin Name: Tooltip
* Plugin URI: https://silicodevalley.com/lab/tooltip
* Description: Crea tooltips en el contenido con un shortcode.
* Version: 1.0
* Author: David Perálvarez
* Author URI: https://silicodevalley.com
* License: GPL2
*/

2- Le añadimos el shortcode

Nuestro shortcode se usará del siguiente modo:

[tooltip text="Texto del tooltip"]Texto al cual queremos añadirle un tooltip[/tooltip]

Por lo que su nombre es tooltip y la función de callback donde definiremos su funcionamiento será scv_tooltip_shortcode.

Esa función a su vez recibe 2 parámetros:

  • $atts: arreglo asociativo que contiene los atributos del shortcode y desde el cual recogemos el valor de text.
  • $content: que contiene el contenido que metemos entre el tag de apertura y cierra del shortcode.

Y con esos elementos, generamos y retornamos la estructura HTML, a la cual luego le daremos estilos de tooltip.

add_shortcode( 'tooltip', 'scv_tooltip_shortcode' );

function scv_tooltip_shortcode( $atts, $content = null ) {
  
  $atts = shortcode_atts(
    array(
        'text' => '',
    ),
    $atts,
    'tooltip'
  );

  // Return the HTML for the tooltip
  return '<span class="tooltip">' . $content . '<span class="tooltip-text">' . $atts['text'] . '</span></span>';

}

3- Incluimos una hoja de estilos

Para ello creamos una carpeta llamada assets y dentro un nuevo archivo llamado tooltip-styles.css.

add_action( 'wp_enqueue_scripts', 'scv_tooltip_enqueue_scripts' );

function scv_tooltip_enqueue_scripts() {
  wp_enqueue_style( 'tooltip-styles', plugin_dir_url( __FILE__ ) . 'assets/tooltip-styles.css' );
}

Y en esta hoja de estilos nos encaramos de:

  • Hacer visible aquellos textos que tengan un tooltip asociado.
  • Crear el tooltip que por defecto está oculto y al pasar el cursor por encima se muestre.
  • Al cajetín del tooltip le añadimos un caret down (una flechita hacia abajo).
.tooltip {
	position: relative;
	border-bottom: 1px dotted black;
	cursor: pointer;
}

.tooltip-text {
	width: 120px;
	font-size: 14px;
	background-color: black;
	color: white;
	padding: 8px;
	border-radius: 4px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s;
}

.tooltip-text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}

Y ya estaríamos, ya solo te falta activar el plugin y testearlo 🥳

Vídeo paso a paso y código completo

Si lo deseas, puedes ver el tutorial en formato vídeo con mucho más detalle y explicaciones más extensas y obtener el código completo:

Para ver este vídeo del tutorial, primero debes suscribirte.

¡Espero que te haya gustado y hayas aprendido algo nuevo!

Únete al boletín: Diario de un desarrollador web freelance

Importante: envío correos con frecuencia y en cada uno además de contarte historias, consejos y marrones de mi día a día, ofrezco mis productos y servicios. Si esto te supone un problema, no te suscribas. Y si te cansas, podrás darte de baja y tan amigos.

Responsable: David Perálvarez Fernández. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

¡Ya casi estamos! Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Para dejar dudas en este tutorial, primero debes suscribirte.

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Mostrar detalles
Nombre Proveedor Propósito Duración
_ga Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 2 años
_gat Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para limitar el porcentaje de solicitudes. 1 minuto
_gid Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 24 horas
Política de cookies

Más información sobre nuestra política de cookies