Código completo para añadir un shortcode que muestra un ícono de interrogación con información adicional al pasar el mouse.
Cómo usarlo
Una vez que añadas este código en "Code Snippets", puedes utilizar el shortcode de las siguientes formas:
Uso básico:
[tooltip_info text="Esta es la información adicional que aparecerá al pasar el mouse"]
Con más opciones:
[tooltip_info icon="?" text="Información detallada aquí" icon_bg="#444" bg_color="#333" width="300px"]
Contenido entre etiquetas:
[tooltip_info]
Esta es la información adicional que aparecerá al pasar el mouse.
Puede incluir párrafos y formateo.
[/tooltip_info]
Parámetros disponibles
text: El texto que aparecerá en el tooltip (opcional si usas contenido entre etiquetas)
icon: El ícono a mostrar (por defecto "?")
width: Ancho del tooltip (por defecto "250px")
bg_color: Color de fondo del tooltip (por defecto "#333")
text_color: Color del texto del tooltip (por defecto "#fff")
icon_bg: Color de fondo del ícono (por defecto "#444")
icon_color: Color del texto del ícono (por defecto "#fff")
Ejemplo para widgets de Elementor
Puedes insertar el shortcode en cualquier widget de Elementor que acepte HTML o shortcodes:
Añade un widget de "Text Editor" o "HTML"
Inserta el shortcode junto a tu texto:
Historias y reels con fotos y música [tooltip_info]Es posible añadir videos si el cliente proporciona[/tooltip_info]
El tooltip se mostrará como un círculo con un signo de interrogación y, al pasar el mouse por encima, aparecerá el texto informativo con estilo y transiciones suaves.
Añade este codigo en tu plugin code snippets
<?php
/**
* Plugin Name: Tooltip Info Shortcode
* Description: Añade un shortcode [tooltip_info] para mostrar información adicional al pasar el mouse
* Version: 1.0
* Author: Ariapsa Diseño web
*/
// Evitar acceso directo al archivo
if (!defined('ABSPATH')) {
exit;
}
// Registrar scripts y estilos
function tooltip_info_enqueue_scripts() {
// Registrar y encolar estilos CSS
wp_register_style('tooltip-info-style', false);
wp_enqueue_style('tooltip-info-style');
// Añadir estilos inline
$custom_css = '
.tooltip-info-container {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 5px;
}
.tooltip-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #444;
color: #fff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.tooltip-info-icon:hover {
background-color: #666;
}
.tooltip-info-content {
visibility: hidden;
position: absolute;
z-index: 999;
width: 250px;
background-color: #333;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 12px;
font-size: 14px;
line-height: 1.5;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.tooltip-info-content::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-info-container:hover .tooltip-info-content {
visibility: visible;
opacity: 1;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.tooltip-info-content {
width: 200px;
}
}
';
wp_add_inline_style('tooltip-info-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'tooltip_info_enqueue_scripts');
// Crear shortcode para el tooltip de información
function tooltip_info_shortcode($atts, $content = null) {
// Extraer y definir atributos
$atts = shortcode_atts(
array(
'text' => '', // Texto dentro del tooltip
'icon' => '?', // Icono a mostrar (por defecto signo de interrogación)
'position' => 'top', // Posición del tooltip (futura implementación)
'width' => '250px', // Ancho del tooltip
'bg_color' => '#333', // Color de fondo del tooltip
'text_color' => '#fff', // Color del texto del tooltip
'icon_bg' => '#444', // Color de fondo del icono
'icon_color' => '#fff', // Color del icono
),
$atts,
'tooltip_info'
);
// Si no hay texto en el tooltip, usar el contenido entre las etiquetas shortcode
if (empty($atts['text']) && !empty($content)) {
$atts['text'] = do_shortcode($content);
}
// Generar ID único para este tooltip
$unique_id = 'tooltip_' . uniqid();
// Estilos específicos para este tooltip
$specific_styles = '
<style>
#' . $unique_id . ' .tooltip-info-icon {
background-color: ' . esc_attr($atts['icon_bg']) . ';
color: ' . esc_attr($atts['icon_color']) . ';
}
#' . $unique_id . ' .tooltip-info-icon:hover {
background-color: ' . esc_attr(adjustBrightness($atts['icon_bg'], 20)) . ';
}
#' . $unique_id . ' .tooltip-info-content {
background-color: ' . esc_attr($atts['bg_color']) . ';
color: ' . esc_attr($atts['text_color']) . ';
width: ' . esc_attr($atts['width']) . ';
}
#' . $unique_id . ' .tooltip-info-content::after {
border-color: ' . esc_attr($atts['bg_color']) . ' transparent transparent transparent;
}
</style>
';
// Construir el HTML del tooltip
$output = $specific_styles;
$output .= '<span id="' . $unique_id . '" class="tooltip-info-container">';
$output .= '<span class="tooltip-info-icon">' . esc_html($atts['icon']) . '</span>';
$output .= '<span class="tooltip-info-content">' . wpautop($atts['text']) . '</span>';
$output .= '</span>';
return $output;
}
add_shortcode('tooltip_info', 'tooltip_info_shortcode');
// Función auxiliar para ajustar brillo de colores
function adjustBrightness($hex, $steps) {
// Convertir hexadecimal a RGB
$hex = str_replace('#', '', $hex);
$r = hexdec(substr($hex, 0, 2));
$g = hexdec(substr($hex, 2, 2));
$b = hexdec(substr($hex, 4, 2));
// Ajustar brillo
$r = max(0, min(255, $r + $steps));
$g = max(0, min(255, $g + $steps));
$b = max(0, min(255, $b + $steps));
// Convertir RGB de vuelta a hexadecimal
return '#' . sprintf('%02x%02x%02x', $r, $g, $b);
}