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 detext
.$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!