Tooltips toevoegen in WordPress zonder plugins

De term tooltip heeft geen unieke vertaling in het Engels, hij kan worden beschreven als "tooltip", "helpballon", "pop-up beschrijving" of zelfs "helptekst", afhankelijk van de context waarin hij wordt gebruikt.

Een tooltip is een pop-upbericht dat verschijnt bij interactie met een element, door erop te klikken of door de muisaanwijzer te bewegen. Deze tooltips worden gebruikt om extra informatie te geven zonder permanente ruimte in te nemen. Ideaal voor het uitleggen van pictogrammen, technische termen of acties in interfaces.

Baten of schaden tooltips SEO?

Nou, zoals voor bijna alles, is het antwoord altijd afhankelijk. Hoewel SEO-puristen waarschuwen dat Google niet van "verborgen" of gemaskeerde inhoud houdt en het gebruik ervan hard bestraft, zou dit een uiterste zijn voor gevallen van misbruik die je inhoud kunnen "kannibaliseren". Echter, tooltips die met een zekere balans en een minimum aan logica worden gebruikt, kunnen voordelig zijn.

Voordelen van het gebruik van tooltips

Over het algemeen kunnen deze berichten, als ze vriendelijk en onopvallend zijn, bijdragen aan het verbeteren van verschillende aspecten van de gebruikerservaring. Ze verminderen onder andere bouncepercentages en verbeteren de toegankelijkheid. Het kan ook mogelijkheden bieden om extra trefwoorden te gebruiken die niet van nature in de hoofdinhoud passen, wat helpt bij semantische SEO.

Bovendien kunnen ze de doorklikratio verbeteren. Door tooltips in de navigatie of call-to-action knoppen aan te bieden, kunnen ze gebruikers effectiever begeleiden, wat leidt tot hogere doorklikpercentages. Maar om dit allemaal mogelijk te maken, moeten een paar minimumrichtlijnen worden gevolgd.

Aanbevelingen voor uiterlijk, inhoud en werking

• Gebruik van HTML-elementen en ARIA-attributen om ervoor te zorgen dat schermlezers en zoekmachines toegang hebben tot de informatie die ze bevatten.
• Een tooltip moet kort zijn. Het is duidelijk dat niemand een enorme hoeveelheid informatie in een pop-up gaat lezen en je zult een groot deel van de inhoud behandelen. Het moet de minimale, precieze en noodzakelijke informatie bevatten en dit mag niet kritisch zijn voor de gebruiker bij het uitvoeren of voltooien van een actie.
• Inhoud mag niet overbodig of herhaald zijn, zorg ervoor dat je extra nuttige en noodzakelijke informatie verschaft en dat deze niet wordt herhaald in je inhoud om "dubbele inhoud" te voorkomen.
• Probeer tooltips die verdwijnen als je de cursor beweegt zoveel mogelijk te vermijden of gebruik ze alleen in berichten die niet veel informatie en/of inhoud bevatten. In het ideale geval worden ze per klik weergegeven en sluiten ze wanneer je weer ergens op het scherm klikt.
• Zorg ervoor dat ze leesbaar zijn en de juiste grootte hebben.
• Voeg geen twintig verschillende ontwerpen van tooltip-iconen of tooltip-links toe, dat schept alleen maar verwarring. Een vast en consistent ontwerp zal je bezoekers helpen om ze op het eerste gezicht te herkennen.
• Overdrijf het niet, plan je strategie goed om ze alleen toe te voegen waar je denkt dat ze de toegang tot relevante en/of noodzakelijke aanvullende informatie vergemakkelijken.

Kenmerken en functionaliteiten van de code

Deze . png-afbeelding met transparante achtergrond is gebruikt voor dit geval.

Hier kun je testen of het eindresultaat werkt [tooltip text="Voorbeeld tooltip gebruikt in jrmora.com" position="auto"].

De URL van de afbeelding wordt toegevoegd tussen de enkele aanhalingstekens op deze regel:

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

Als je ervoor kiest om de code aan te passen om een SVG HTML-pictogram te gebruiken, zoals deze, kun je gemakkelijker spelen met de kleur, achtergrond, dikte, enz.

Intelligente automatische positieaanpassing om schermranden te vermijden. D.w.z. als je de bovenrand nadert, wordt de tooltip onderaan weergegeven en vivecersa.

Volledig functionele links kunnen worden toegevoegd in de tooltip met aanpasbare stijlen. Hoewel het niet aan te raden is om links toe te voegen, is het mogelijk dat je dit af en toe moet doen. In het geval dat een tooltip een link bevat, is er een vertraging van 200 ms in het automatisch verbergen om het makkelijker te maken om te klikken.

Beveiligde HTML-ondersteuning. Ondersteunt:

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

Positie, vaste en aanpasbare attributen.

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

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

Responsief ontwerp.

Mobiel aanpasbaar (aanklikbare toggle).

Resetten bij formaat wijzigen, roteren of verschuiven

Belangrijkste CSS-klassen:

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

Belangrijkste functies van de JS:

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

Voorbeelden van 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>"]

Deze code heb ik gebruikt voor mijn specifieke behoeften. Begrijp het als een startpunt. Het is heel goed te verbeteren. Je kunt de CSS en de JS scheiden (of het zelfs overwegen zonder Javascript te gebruiken) en het zo aanpassen dat het ook kan worden toegepast op woorden in de inhoud zonder het pictogram te tonen.

Om het te gebruiken, zoals altijd, voegt u het gewoon toe aan de functions.php van uw sjabloon of uw childthema als u de wijzigingen wilt behouden wanneer uw sjabloon wordt bijgewerkt.

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