Ajouter des infobulles dans WordPress sans plugins

Les infobulles nuisent-elles ou profitent-elles au référencement ?

Le terme tooltip n'a pas de traduction unique, il peut être décrit comme "info-bulle", "bulle d'aide", "description pop-up" ou même "texte d'aide" selon le contexte dans lequel il est utilisé.

Une info-bulle est un message contextuel qui apparaît lorsqu'on interagit avec un élément, soit en cliquant dessus, soit en passant la souris dessus. Ces infobulles sont utilisées pour fournir des informations supplémentaires sans occuper d'espace permanent. Elles sont idéales pour expliquer les icônes, les termes techniques ou les actions dans les interfaces.

Les infobulles nuisent-elles ou profitent-elles au référencement ?

Comme pour presque tout, la réponse dépend toujours. Si les puristes du référencement avertissent que Google n'aime pas les contenus "cachés" ou masqués et pénalise sévèrement leur utilisation, il s'agirait d'un cas extrême d'abus qui pourrait "cannibaliser" votre contenu. Cependant, les infobulles, utilisées avec un certain équilibre et un minimum de logique, peuvent être bénéfiques.

Avantages de l'utilisation des infobulles

D'une manière générale, ces messages, s'ils sont conviviaux et discrets, peuvent contribuer à améliorer différents aspects de l'expérience de l'utilisateur. Ils permettent notamment de réduire les taux de rebond et d'améliorer l'accessibilité. Ils peuvent également permettre d'utiliser des mots-clés supplémentaires qui ne s'intègrent pas naturellement dans le contenu principal, ce qui contribue au référencement sémantique.

En outre, elles peuvent améliorer le taux de clics. En proposant des infobulles dans la navigation ou des boutons d'appel à l'action, ils peuvent guider les utilisateurs plus efficacement, ce qui se traduit par des taux de clics plus élevés. Mais pour que tout cela soit possible, quelques règles minimales doivent être respectées.

Recommandations concernant l'apparence, le contenu et le fonctionnement

Utilisation d'éléments HTML et d'attributs ARIA pour garantir que les lecteurs d'écran et les moteurs de recherche puissent accéder aux informations qu'ils contiennent.
Une info-bulle doit être brève. Il est évident que personne ne va lire une grande quantité d'informations dans une pop-up et que vous allez couvrir une grande partie du contenu. Elle doit contenir le minimum d'informations précises et nécessaires, et celles-ci ne doivent pas être critiques pour l'utilisateur lorsqu'il effectue ou termine une action.
Le contenu ne doit pas être redondant ou répété, assurez-vous que vous fournissez des informations supplémentaires utiles et nécessaires et qu'elles ne sont pas répétées dans votre contenu afin d'éviter le "contenu dupliqué".
Essayez d'éviter autant que possible les infobulles qui disparaissent lorsque vous déplacez le curseur ou utilisez-les uniquement dans les messages qui ne contiennent pas beaucoup d'informations et/ou de contenu. Idéalement, elles devraient s'afficher par clic et se fermer lorsque vous cliquez à nouveau n'importe où sur l'écran.
Veillez à ce qu'ils soient lisibles et de la bonne taille.
N'ajoutez pas vingt modèles différents d'icônes d'infobulle ou de liens d'infobulle, cela ne ferait que créer de la confusion. Un design fixe et cohérent aidera vos visiteurs à les identifier au premier coup d'œil.
N'en faites pas trop, planifiez bien votre stratégie pour ne les ajouter que là où vous pensez qu'ils facilitent l'accès à des informations complémentaires pertinentes et/ou nécessaires.

Caractéristiques et fonctionnalités du code

Cette image.png avec fond transparent a été utilisée pour ce cas.

Ici, vous pouvez tester le résultat final en travaillant [tooltip text="Example tooltip used in jrmora.com" position="auto"].

L'URL de l'image est ajoutée entre les guillemets simples de cette ligne :

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

Si vous choisissez de modifier le code pour utiliser une icône HTML SVG, comme celle-ci, vous pourrez jouer plus facilement avec la couleur, l'arrière-plan, l'épaisseur, etc.

Ajustement automatique intelligent de la position pour éviter les bords de l'écran. Par exemple, lorsque l'on s'approche du bord supérieur, l'info-bulle s'affiche en bas et ainsi de suite.

Des liens entièrement fonctionnels peuvent être ajoutés dans l'infobulle avec des styles personnalisables. Bien qu'il ne soit pas conseillé d' ajouter des liens, il est possible que vous ayez besoin de le faire à l'occasion. Dans le cas où une info-bulle contient un lien, le masquage automatique est retardé de 200 ms afin de faciliter le clic.

Support HTML sécurisé. Supports :

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

Position, attributs fixes et adaptables.

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

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

Conception adaptée.

Adaptable aux appareils mobiles (bascule cliquable).

Réinitialisation en cas de redimensionnement, de rotation ou de déplacement

Principales classes CSS:

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

Fonctions clés de la JS:

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

Exemples de shortcodes:

[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>"]

Ce code est celui que j'ai utilisé pour mes besoins spécifiques. Comprenez-le comme un point de départ. Il est très perfectible. Vous pouvez séparer le CSS et le JS (ou même l'envisager sans utiliser le Javascript) et l'adapter pour qu'il puisse également s'appliquer aux mots dans le contenu sans afficher l'icône.

Pour l'utiliser, comme toujours, il suffit de l'ajouter au fichier functions.php de votre template ou de votre thème enfant si vous souhaitez conserver les modifications lorsque votre template est mis à jour.

Code

/**
 * 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');