Pridanie nápovedy v systéme WordPress bez zásuvných modulov

Pojem tooltip nemá jednoznačný preklad do slovenčiny, v závislosti od kontextu, v ktorom sa používa, ho možno opísať ako "nápovedu", "balón nápovedy", "vyskakovací popis" alebo dokonca "text nápovedy".

Tip je vyskakovacia správa, ktorá sa zobrazí pri interakcii s prvkom, a to buď kliknutím naň, alebo pri prejdení myšou. Tieto tooltipy sa používajú na poskytovanie dodatočných informácií bez toho, aby zaberali trvalé miesto. Ideálne na vysvetlenie ikon, technických termínov alebo akcií v rozhraniach.

Škodia alebo prospievajú tooltipy SEO?

No, ako takmer na všetko, aj tu platí, že vždy záleží na tom, čo sa stane. Hoci puristi SEO upozorňujú, že Google nemá rád "skrytý" alebo maskovaný obsah a jeho používanie tvrdo trestá, v prípade zneužitia , ktoré by mohlo "kanibalizovať" váš obsah, by to bol extrém. Avšak tooltipy, používané s určitou vyváženosťou a minimom logiky, môžu byť prospešné.

Výhody používania panelov s nástrojmi

Všeobecne povedané, tieto správy, ak sú priateľské a nevtieravé, môžu prispieť k zlepšeniu rôznych aspektov používateľskej skúsenosti. Okrem iného znižujú mieru odmietnutia a zlepšujú prístupnosť. Môžu tiež poskytnúť príležitosť na použitie ďalších kľúčových slov, ktoré prirodzene nezapadajú do hlavného obsahu, čo pomáha pri sémantickej SEO optimalizácii.

Okrem toho môžu zvýšiť mieru prekliku. Ponúkaním tooltipov v navigácii alebo tlačidiel s výzvou na akciu môžu používateľov efektívnejšie navigovať, čo vedie k vyššej miere preklikov. Aby to však bolo všetko možné, je potrebné dodržiavať niekoľko minimálnych zásad.

Odporúčania týkajúce sa vzhľadu, obsahu a prevádzky

• Používanie prvkov HTML a atribútov ARIA na zabezpečenie prístupu čítačiek obrazovky a vyhľadávačov k informáciám, ktoré obsahujú.
• Nápoveda k nástroju musí byť stručná. Je zrejmé, že nikto nebude čítať obrovské množstvo informácií vo vyskakovacom okne a vy tak pokryjete veľkú časť obsahu. Mal by obsahovať minimum presných a potrebných informácií, ktoré by nemali byť pre používateľa rozhodujúce pri vykonávaní alebo dokončovaní akcie.
• Obsah by nemal byť nadbytočný alebo sa opakovať, uistite sa, že poskytujete ďalšie užitočné a potrebné informácie a že sa v obsahu neopakujú, aby ste sa vyhli "duplicitnému obsahu".
• Snažte sa čo najviac vyhýbať tooltipom, ktoré zmiznú pri pohybe kurzora, alebo ich používajte len v správach, ktoré neobsahujú veľa informácií a/alebo obsahu. V ideálnom prípade by sa mali zobrazovať na jedno kliknutie a zatvoriť sa po opätovnom kliknutí kdekoľvek na obrazovke.
• Uistite sa, že sú čitateľné a majú správnu veľkosť.
• Nepridávajte dvadsať rôznych vzorov ikon alebo odkazov tooltipov, to len vytvára zmätok. Pevný a konzistentný dizajn pomôže vašim návštevníkom identifikovať ich na prvý pohľad.
• Nepreháňajte to, dobre si naplánujte stratégiu, aby ste ich pridávali len tam, kde si myslíte, že uľahčujú prístup k relevantným a/alebo potrebným doplnkovým informáciám.

Vlastnosti a funkcie kódu

V tomto prípade bol použitý tento obrázok.png s priehľadným pozadím.

Tu si môžete vyskúšať konečný výsledok práce [tooltip text="Príklad tooltipu použitého v jrmora.com" position="auto"].

Adresa URL obrázka sa pridá medzi jednoduché úvodzovky na tomto riadku:

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

Ak sa rozhodnete upraviť kód tak, aby používal ikonu SVG HTML, ako je táto, budete sa môcť ľahšie hrať s farbou, pozadím, hrúbkou atď.

Inteligentné automatické nastavenie polohy, aby sa zabránilo okrajom obrazovky. T. j. keď sa priblížite k hornému okraju, zobrazí sa nápoveda v spodnej časti a podobne.

V rámci tooltipu je možné pridať plne funkčné odkazy s prispôsobiteľnými štýlmi. Hoci sa neodporúča pridávať odkazy, je možné, že to budete občas potrebovať. V prípade, že tooltip obsahuje odkaz, dochádza k automatickému skrytiu s oneskorením 200 ms, aby sa uľahčilo kliknutie.

Zabezpečená podpora HTML. Podporuje:

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

Poloha, pevné a prispôsobiteľné atribúty.

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

Atribúty ARIA (aria-expanded, role="tooltip").

Responzívny dizajn.

Možnosť prispôsobenia pre mobilné zariadenia (klikateľný prepínač).

Obnovenie pri zmene veľkosti, otáčaní alebo posúvaní

Hlavné triedy CSS:

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

Kľúčové funkcie JS:

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

Príklady skratiek:

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

Tento kód som použil pre svoje špecifické potreby. Pochopte ho ako východiskový bod. Dá sa veľmi dobre vylepšovať. Môžete oddeliť CSS a JS (alebo dokonca uvažovať o ňom bez použitia Javascriptu) a prispôsobiť ho tak, aby sa dal použiť aj na slová v obsahu bez zobrazenia ikony.

Ak ho chcete používať, ako vždy, stačí ho pridať do súboru functions.php vašej šablóny alebo podriadenej témy, ak chcete zachovať zmeny pri aktualizácii šablóny.

Kód

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