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:

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:

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