Aggiunta di tooltip in WordPress senza plugin

Pubblicato: 25/07/2025 : 12:58 | Aggiornato: 25/07/2025 : 14:08 |

Email Pinterest Telegram Whatsapp Reddit Menéame Mastodon Bluesky
Seleccionar idioma
Aggiunta di tooltip in WordPress senza plugin
Un esempio di tooltip utilizzato qui

Il termine tooltip non ha una traduzione univoca in inglese, può essere descritto come "tooltip", "help balloon", "pop-up description" o anche "help text" a seconda del contesto in cui viene utilizzato.

Un tooltip è un messaggio a comparsa che appare quando si interagisce con un elemento, facendo clic su di esso o passando il mouse. Questi tooltip vengono utilizzati per fornire informazioni aggiuntive senza occupare spazio permanente. Sono ideali per spiegare icone, termini tecnici o azioni nelle interfacce.

I tooltip danneggiano o favoriscono la SEO?

Come per quasi tutto, la risposta è sempre: dipende. Mentre i puristi della SEO avvertono che Google non ama i contenuti "nascosti" o mascherati e ne penalizza duramente l'uso, questo sarebbe un estremo per i casi di abuso che potrebbero "cannibalizzare" i vostri contenuti. Tuttavia, i tooltip, utilizzati con un certo equilibrio e un minimo di logica, possono essere utili.

Vantaggi dell'utilizzo dei tooltip

In generale, questi messaggi, se amichevoli e non invadenti, possono contribuire a migliorare diversi aspetti dell'esperienza dell'utente. Tra le altre cose, riducono la frequenza di rimbalzo e migliorano l'accessibilità. Inoltre, possono offrire l'opportunità di utilizzare parole chiave aggiuntive che non si inseriscono naturalmente nel contenuto principale, contribuendo così alla SEO semantica.

Inoltre, possono migliorare il tasso di clic. Offrendo tooltip nella navigazione o pulsanti di invito all'azione, possono guidare gli utenti in modo più efficace, portando a tassi di clic più elevati. Ma perché tutto questo sia possibile, è necessario seguire alcune linee guida minime.

Raccomandazioni per l'aspetto, il contenuto e il funzionamento

  • Uso degli elementi HTML e degli attributi ARIA per garantire che gli screen reader e i motori di ricerca possano accedere alle informazioni contenute.
  • Un tooltip deve essere breve. Ovviamente, nessuno leggerà un'enorme quantità di informazioni in un banner pop-up e inoltre coprirete gran parte del contenuto. Dovrebbe contenere le informazioni minime, precise e necessarie, che non devono essere critiche per l'utente quando esegue o completa un'azione.
  • I contenuti non devono essere ridondanti o ripetuti, assicuratevi di fornire informazioni aggiuntive utili e necessarie e che non vengano ripetute nei vostri contenuti per evitare "contenuti duplicati".
  • Cercate di evitare il più possibile i tooltip che scompaiono al passaggio del cursore o usateli solo nei messaggi che non contengono molte informazioni e/o contenuti. Idealmente, dovrebbero essere visualizzati per ogni clic e chiudersi quando si fa nuovamente clic in qualsiasi punto dello schermo.
  • Assicuratevi che siano leggibili e di dimensioni corrette.
  • Non aggiungete venti design diversi di icone o link di tooltip, che creano solo confusione. Un design fisso e coerente aiuterà i visitatori a identificarli a prima vista.
  • Non esagerate, pianificate bene la vostra strategia per aggiungerli solo quando pensate che facilitino l'accesso a informazioni complementari rilevanti e/o necessarie.

Caratteristiche e funzionalità del codice

Per questo caso è stata utilizzata un'immagine.png con sfondo trasparente.

Qui è possibile verificare il risultato finale del lavoro [tooltip text="Esempio di tooltip utilizzato in jrmora.com" position="auto"].

L'URL dell'immagine viene aggiunto tra gli apici singoli di questa riga:

$default_image = 'URL-de-tu-imagen';

Se si sceglie di modificare il codice per utilizzare un'icona HTML SVG, come questa, si potrà giocare più facilmente con il colore, lo sfondo, lo spessore, ecc.

Regolazione automatica intelligente della posizione per evitare i bordi dello schermo. Ad esempio, quando ci si avvicina al bordo superiore, la descrizione degli strumenti viene visualizzata in basso e così via.

È possibile aggiungere collegamenti completamente funzionali all'interno del tooltip con stili personalizzabili. Sebbene non sia consigliabile aggiungere collegamenti, è possibile che sia necessario farlo in alcune occasioni. Nel caso in cui la tooltip contenga un link, la sua scomparsa automatica avviene con un ritardo di 200 ms, per facilitare il clic.

Supporto HTML sicuro. Supporta:

<strong>, <em>, <a>, <br>, <span>

Posizione, attributi fissi e adattabili.

Atributos de posición disponibles:  position="auto" (default), top, bottom, left, right

Attributi ARIA (aria-expanded, role="tooltip").

Design reattivo.

Adattabile ai dispositivi mobili (toggle cliccabile).

Azzeramento in caso di ridimensionamento, rotazione o spostamento

Classi CSS principali:

.tooltip-container /* Contenedor principal */
.tooltip-trigger  /* Botón/icono que activa el tooltip */
.tooltip          /* Caja del mensaje emergente */
.tooltip-arrow    /* Flecha indicadora */

Funzioni chiave del JS:

calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip()          // Muestra el tooltip
hideTooltip()          // Oculta el tooltip con retraso

Esempi di shortcode:

[tooltip text="Texto a mostrar"] 

[tooltip text="Texto a mostrar <strong>en negrita</strong> donde sea" position="auto"] 

[tooltip text="Texto <strong>importante</strong> y <em>énfasis</em>"]

[tooltip text="<a href='https://ejemplo.com' target='_blank'>Visite nuestro sitio</a>"]

Questo codice è quello che ho utilizzato per le mie esigenze specifiche. Comprendetelo come punto di partenza. È molto migliorabile. È possibile separare il CSS e il JS (o anche considerarlo senza usare Javascript) e adattarlo in modo che possa essere applicato anche alle parole del contenuto senza mostrare l'icona.

Per usarlo, come sempre, basta aggiungerlo al functions.php del vostro template o del vostro tema figlio, se volete mantenere le modifiche quando il vostro template viene aggiornato.

Codice

/**
 * Shortcode para tooltip con ajuste automático 
 * Un ejemplo de uso: [tooltip text="Texto <a href='#'>enlace</a>" position="auto"]
 */
function custom_tooltip_shortcode($atts) {
    $default_image = 'URL-de-tu-imagen';
    
    $atts = shortcode_atts(
        array(
            'text' => __('Información adicional', 'text-domain'),
            'position' => 'auto',
            'color' => '#6a0000',
            'shadow' => '#9c9c9c',
            'width' => '18px',
            'id' => 'tooltip-' . uniqid()
        ),
        $atts,
        'tooltip'
    );

    // HTML permitido
    $allowed_html = array(
        'strong' => array(),
        'b' => array(),
        'em' => array(),
        'i' => array(),
        'br' => array(),
        'span' => array(
            'style' => array(),
            'class' => array()
        ),
        'a' => array(
            'href' => array(),
            'title' => array(),
            'target' => array(),
            'style' => array(),
            'rel' => array()
        )
    );
    
    $text = wp_kses($atts['text'], $allowed_html);
    $position = in_array($atts['position'], ['top', 'bottom', 'left', 'right', 'auto']) ? $atts['position'] : 'auto';
    $color = sanitize_hex_color($atts['color']);
    $shadow = sanitize_hex_color($atts['shadow']);
    $width = esc_attr($atts['width']);
    $id = sanitize_html_class($atts['id']);

    $output = '
    <span class="tooltip-container" data-position="' . esc_attr($position) . '">
        <button class="tooltip-trigger" aria-describedby="' . $id . '" aria-expanded="false">
            <img src="' . esc_url($default_image) . '" width="' . $width . '" alt="" aria-hidden="true"/>
        </button>
        <span id="' . $id . '" role="tooltip" class="tooltip" style="background-color: ' . $color . '; box-shadow: 0 5px 10px ' . $shadow . ';">
            ' . $text . '
            <span class="tooltip-arrow"></span>
        </span>
    </span>';

    return $output;
}
add_shortcode('tooltip', 'custom_tooltip_shortcode');

/**
 * Estilos CSS optimizados para enlaces
 */
function add_tooltip_styles() {
    echo '
    <style>
    .tooltip-container {
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

    .tooltip-trigger {
        background: none;
        border: none;
        padding: 0;
        margin: 0 2px;
        cursor: pointer;
        line-height: 1;
    }

    .tooltip {
        position: absolute;
        color: #fff;
        padding: 10px 12px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1.5;
        width: 220px;
        max-width: 90vw;
        text-align: left;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 100000;
        pointer-events: none;
    }

    .tooltip a {
        color: #fff !important;
        text-decoration: underline;
        pointer-events: auto !important;
    }

    .tooltip * {
        pointer-events: auto;
    }

    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border: 7px solid transparent;
    }

    /* Posiciones dinámicas */
    .tooltip[data-position="top"] {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }
    .tooltip[data-position="top"] .tooltip-arrow {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-top-color: inherit;
    }

    .tooltip[data-position="bottom"] {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
    }
    .tooltip[data-position="bottom"] .tooltip-arrow {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-bottom-color: inherit;
    }

    .tooltip[data-position="left"] {
        top: 50%;
        right: 100%;
        transform: translateY(-50%);
        margin-right: 10px;
    }
    .tooltip[data-position="left"] .tooltip-arrow {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        border-left-color: inherit;
    }

    .tooltip[data-position="right"] {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        margin-left: 10px;
    }
    .tooltip[data-position="right"] .tooltip-arrow {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        border-right-color: inherit;
    }

    /* Interacción */
    .tooltip-trigger:hover + .tooltip,
    .tooltip-trigger:focus + .tooltip,
    .tooltip-trigger[aria-expanded="true"] + .tooltip {
        visibility: visible;
        opacity: 1;
    }
    </style>
    ';
}
add_action('wp_head', 'add_tooltip_styles');

/**
 * JavaScript corregido para enlaces clickeables con retraso
 */
function add_tooltip_scripts() {
    echo '
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Configurar todos los tooltips
        document.querySelectorAll(".tooltip-container").forEach(function(container) {
            const tooltip = container.querySelector(".tooltip");
            const trigger = container.querySelector(".tooltip-trigger");
            let hoverTimeout;
            let isMouseInTooltip = false;
            const position = container.getAttribute("data-position");

            // Función para calcular posición automática
            function calculateBestPosition() {
                const rect = trigger.getBoundingClientRect();
                const viewportHeight = window.innerHeight;
                const viewportWidth = window.innerWidth;
                const tooltipHeight = 150; // Altura estimada
                const tooltipWidth = 220; // Ancho estimado
                
                const space = {
                    top: rect.top,
                    bottom: viewportHeight - rect.bottom,
                    left: rect.left,
                    right: viewportWidth - rect.right
                };
                
                // Determinar mejor posición disponible
                if (space.top >= tooltipHeight || (space.top >= space.bottom && space.top > 50)) {
                    return "top";
                } else if (space.bottom >= tooltipHeight) {
                    return "bottom";
                } else if (space.right >= tooltipWidth) {
                    return "right";
                } else if (space.left >= tooltipWidth) {
                    return "left";
                }
                return "top"; // Default
            }

            // Actualizar posición (solo para "auto")
            function updatePosition() {
                if (position === "auto") {
                    tooltip.setAttribute("data-position", calculateBestPosition());
                }
            }

            // Mostrar tooltip
            function showTooltip() {
                clearTimeout(hoverTimeout);
                tooltip.style.visibility = "visible";
                tooltip.style.opacity = "1";
                trigger.setAttribute("aria-expanded", "true");
            }

            // Ocultar tooltip con retraso de 200ms
            function hideTooltip() {
                if (!isMouseInTooltip) {
                    hoverTimeout = setTimeout(() => {
                        tooltip.style.visibility = "hidden";
                        tooltip.style.opacity = "0";
                        trigger.setAttribute("aria-expanded", "false");
                    }, 200); // Retraso clave para enlaces
                }
            }

            // Inicializar posición
            updatePosition();

            // Eventos para el botón
            trigger.addEventListener("mouseenter", showTooltip);
            trigger.addEventListener("mouseleave", hideTooltip);
            trigger.addEventListener("focus", showTooltip);
            trigger.addEventListener("blur", hideTooltip);

            // Eventos para el tooltip (mejorados para enlaces)
            tooltip.addEventListener("mouseenter", function() {
                isMouseInTooltip = true;
                clearTimeout(hoverTimeout); // Cancelar ocultamiento
            });

            tooltip.addEventListener("mouseleave", function() {
                isMouseInTooltip = false;
                hideTooltip(); // Iniciar retraso para ocultar
            });

            // Click en el botón (para móviles)
            trigger.addEventListener("click", function(e) {
                e.preventDefault();
                if (tooltip.style.visibility === "visible") {
                    hideTooltip();
                } else {
                    showTooltip();
                }
            });

            // Reajustar posición en eventos
            if (position === "auto") {
                window.addEventListener("resize", updatePosition);
                window.addEventListener("scroll", updatePosition, { passive: true });
            }
        });

        // Cerrar tooltips al hacer clic fuera (excepto en enlaces)
        document.addEventListener("click", function(e) {
            if (!e.target.closest(".tooltip-container") && !e.target.closest(".tooltip a")) {
                document.querySelectorAll(".tooltip").forEach(function(tooltip) {
                    tooltip.style.visibility = "hidden";
                    tooltip.style.opacity = "0";
                });
                document.querySelectorAll(".tooltip-trigger").forEach(function(trigger) {
                    trigger.setAttribute("aria-expanded", "false");
                });
            }
        });
    });
    </script>
    ';
}
add_action('wp_footer', 'add_tooltip_scripts');
Email Pinterest Telegram Whatsapp Reddit Menéame Mastodon Bluesky

Vi sentite generosi?

Articoli correlati

Este blog se aloja en LucusHost

LucusHost, el mejor hosting