Lisäämällä tooltips WordPress ilman plugins

Haittaavatko vai hyödyttävätkö työkaluvihjeet SEO:ta?

Termillä tooltip ei ole yksiselitteistä englanninkielistä käännöstä, vaan se voidaan kuvata nimillä "tooltip", "help balloon", "pop-up description" tai jopa "help text" riippuen siitä, missä yhteydessä sitä käytetään.

Työkaluvihje on ponnahdusviesti, joka tulee näkyviin, kun olet vuorovaikutuksessa elementin kanssa joko napsauttamalla sitä tai hiiren liikuttamalla sitä. Näitä työkaluvihjeitä käytetään antamaan lisätietoa ilman, että ne vievät pysyvää tilaa. Ne ovat ihanteellisia selittämään kuvakkeita, teknisiä termejä tai toimintoja käyttöliittymissä.

Haittaavatko vai hyödyttävätkö työkaluvihjeet SEO:ta?

No, kuten melkein kaikessa, vastaus on aina, että se riippuu. Vaikka SEO-puristit varoittavat, että Google ei pidä "piilotetusta" tai naamioidusta sisällöstä ja rankaisee sen käytöstä ankarasti, tämä olisi äärimmäinen tapa väärinkäytöksille , jotka voivat "kannibalisoida" sisältösi. Työkaluvihjeistä voi kuitenkin olla hyötyä, jos niitä käytetään tasapainoisesti ja loogisesti.

Työkaluvihjeiden käytön edut

Yleisesti ottaen nämä viestit, jos ne ovat ystävällisiä ja huomaamattomia, voivat parantaa käyttäjäkokemuksen eri osa-alueita. Ne muun muassa vähentävät hyppyprosenttia ja parantavat saavutettavuutta. Ne voivat myös tarjota mahdollisuuksia käyttää ylimääräisiä avainsanoja, jotka eivät luonnollisesti sovi pääsisältöön, mikä auttaa semanttisessa SEO:ssa.

Lisäksi ne voivat parantaa klikkausprosenttia. Tarjoamalla työkaluvihjeitä navigoinnissa tai toimintakutsupainikkeissa ne voivat opastaa käyttäjiä tehokkaammin, mikä johtaa korkeampaan klikkausprosenttiin. Jotta tämä kaikki olisi mahdollista, on kuitenkin noudatettava muutamia vähimmäisohjeita.

Ulkonäköä, sisältöä ja toimintaa koskevat suositukset

HTML-elementtien ja ARIA-attribuuttien käyttö sen varmistamiseksi, että ruudunlukijat ja hakukoneet voivat käyttää niiden sisältämää tietoa.
Työkaluvihjeen on oltava lyhyt. On selvää, ettei kukaan lue valtavaa määrää tietoa ponnahdusikkunasta, ja peität suuren osan sisällöstä. Sen tulisi sisältää mahdollisimman vähän, täsmällistä ja tarpeellista tietoa, eikä sen tulisi olla käyttäjän kannalta kriittistä, kun hän suorittaa tai saattaa loppuun jonkin toiminnon.
Sisällön ei pitäisi olla turhaa tai toistuvaa, varmista, että tarjoat hyödyllistä ja tarpeellista lisätietoa ja että sitä ei toisteta sisällössäsi, jotta vältät "päällekkäisen sisällön".
Yritä välttää mahdollisimman paljon työkaluvihjeitä, jotka katoavat, kun siirrät kursoria, tai käytä niitä vain viesteissä, jotka eivät sisällä paljon tietoa ja/tai sisältöä. Ihannetapauksessa niiden tulisi näkyä klikkauskohtaisesti ja sulkeutua, kun klikkaat uudelleen missä tahansa näytön kohdassa.
Varmista, että ne ovat luettavissa ja oikean kokoisia.
Älä lisää kahtakymmentä erilaista kuvaketta tai linkkiä, sillä se aiheuttaa vain sekaannusta. Kiinteä ja johdonmukainen muotoilu auttaa kävijöitäsi tunnistamaan ne ensisilmäyksellä.
Älä liioittele, vaan suunnittele strategiasi niin, että lisäät niitä vain silloin, kun uskot niiden helpottavan pääsyä merkityksellisiin ja/tai tarpeellisiin täydentäviin tietoihin.

Koodin ominaisuudet ja toiminnot

Tätä läpinäkyvällä taustalla olevaa . png-kuvaa on käytetty tässä tapauksessa.

Täällä voit testata lopputuloksen toimivuutta [tooltip text="Esimerkki jrmora.comissa käytetystä tooltipistä" position="auto"].

Kuvan URL-osoite lisätään tällä rivillä lainausmerkkien väliin:

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

Jos päätät muuttaa koodia käyttämään SVG HTML -kuvaketta, kuten tätä, voit leikitellä värin, taustan, paksuuden jne. kanssa helpommin.

Älykäs automaattinen asennon säätö näytön reunojen välttämiseksi. Eli kun lähestyt yläreunaa, työkaluvihje näytetään alareunassa ja päinvastoin.

Työkaluvihjeeseen voidaan lisätä täysin toimivia linkkejä, joiden tyylit voidaan mukauttaa. Vaikka linkkien lisääminen ei ole suositeltavaa, on mahdollista, että joudut tekemään niin toisinaan. Jos työkaluvihje sisältää linkin, se piilotetaan automaattisesti 200 ms:n viiveellä, jotta sitä on helpompi napsauttaa.

Turvallinen HTML-tuki. Tukee:

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

Sijainti, kiinteät ja mukautuvat ominaisuudet.

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

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

Päivitys. Lisätty kuvaan aria-hidden="true" ja role="presentation" ja piilotettu koristeellinen kuvake ruudunlukijoita varten.

Redundanssia vältetään aria-labelilla, joka mahdollistaa tekstin mukauttamisen lyhytkoodin kautta.

[tooltip text="Contenido" aria_label="Ver detalles sobre este elemento"]

Tämä ratkaisu on WCAG 2.1 AA:n mukainen ja ratkaisee PageSpeed Insightsin varoituksen, jonka mukaan painikkeella ei ollut käytettävissä olevaa nimeä.

Responsiivinen suunnittelu.

Sovitettavissa mobiililaitteisiin (napsautettava vaihtokytkin).

Nollaus, kun kokoa muutetaan, pyöritetään tai siirretään

Tärkeimmät CSS-luokat:

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

JS:n keskeiset toiminnot:

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

Esimerkkejä lyhytkoodeista:

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

Suorituskyvyn osalta:

Varojen esilataus: esiladatut kuvat ja CSS.
Laiska lataus: Attribuutit loading="lazy" ja decoding="async" kuvalle.
Ehdollinen lataus: JS ladataan vain, kun lyhytkoodia käytetään.
Debounce: Koonmuutos- ja vieritystapahtumien optimointi.
Optimoitu CSS: Will-change- ja modernien yksiköiden käyttö (min()).
Välimuistiin tallennetut versiot: Käytä filemtime()-ohjelmaa välttääksesi vanhentuneen välimuistiin tallentamisen.

Tätä koodia olen käyttänyt erityistarpeisiini. Ymmärrä se lähtökohtana. Sitä voidaan parantaa. Voit jopa harkita sitä ilman Javascriptin käyttöä ja mukauttaa sitä niin, että sitä voidaan soveltaa myös sisällössä oleviin sanoihin näyttämättä kuvaketta.

Jos haluat käyttää sitä, kuten aina, lisää se vain functions.php-tiedostoon ja mallisi tai lapsiteemasi assets/css/ ja asstes/js/-kansioihin, jos haluat säilyttää muutokset päivitettäessä malliasi.

Koodi

Tämä on tiedostojen rakenne:

sinun-mallisi/
├── functions.php (lisää PHP-koodi loppuun)
├── assets/
│ ├─── css/
│ │ └└── tooltip.css (CSS-tyylit)
│ └└└── js/
│ └└└└└└ tooltip.js (Javascript)

Koodi lisätä mallin functions.php

/**
 * Shortcode para tooltip accesible y optimizado
 * Uso: [tooltip text="Texto" position="auto" color="#6a0000" aria_label="Descripción"]
 */
function accessible_tooltip_shortcode($atts) {
    $default_image = 'https://jrmora.com/wp-content/uploads/2025/07/tooltip-negro.png';
    
    $atts = shortcode_atts(
        array(
            'text' => __('Información adicional', 'text-domain'),
            'position' => 'auto',
            'color' => '#6a0000',
            'shadow' => '#9c9c9c',
            'width' => '18px',
            'id' => 'tooltip-' . uniqid(),
            'aria_label' => __('Mostrar información adicional', 'text-domain')
        ),
        $atts,
        'tooltip'
    );

    // HTML permitido (seguro)
    $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']);
    $aria_label = esc_attr($atts['aria_label']);

    // Preload para la imagen (mejora rendimiento)
    add_action('wp_head', function() use ($default_image) {
        echo '<link rel="preload" href="' . esc_url($default_image) . '" as="image">';
    });

    return '
    <span class="tooltip-container" data-position="' . esc_attr($position) . '">
        <button class="tooltip-trigger" 
                aria-describedby="' . $id . '" 
                aria-expanded="false"
                aria-label="' . $aria_label . '">
            <img src="' . esc_url($default_image) . '" 
                 width="' . $width . '" 
                 alt=""
                 aria-hidden="true"
                 loading="lazy"
                 decoding="async"
                 role="presentation"/>
        </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>';
}
add_shortcode('tooltip', 'accessible_tooltip_shortcode');

/**
 * Carga optimizada de assets
 */
function load_tooltip_assets() {
    global $post;
    
    // CSS externo
    wp_enqueue_style(
        'tooltip-css',
        get_theme_file_uri('/assets/css/tooltip.css'),
        array(),
        filemtime(get_theme_file_path('/assets/css/tooltip.css'))
    );
    
    // JS solo si se usa el shortcode
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'tooltip')) {
        wp_enqueue_script(
            'tooltip-js',
            get_theme_file_uri('/assets/js/tooltip.js'),
            array(),
            filemtime(get_theme_file_path('/assets/js/tooltip.js')),
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'load_tooltip_assets');

CSS / tooltip.css (on tallennettava tähän polkuun /assets/css/tooltip.css)

/* Contenedor principal */
.tooltip-container {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

/* Botón activador */
.tooltip-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    line-height: 1;
}

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

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

/* Posiciones */
.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;
}

/* Interacción */
.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus + .tooltip,
.tooltip-trigger[aria-expanded="true"] + .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Enlaces dentro del tooltip */
.tooltip a {
    color: #fff !important;
    text-decoration: underline;
    pointer-events: auto !important;
}

/* Focus para accesibilidad */
.tooltip-trigger:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

Javascript / Tooltip.js (on tallennettava polkuun /assets/js/tooltip.js)

document.addEventListener("DOMContentLoaded", () => {
    const tooltips = document.querySelectorAll('.tooltip-container[data-position="auto"]');
    if (!tooltips.length) return;

    // Debounce para optimización
    const debounce = (func, wait = 50) => {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    };

    // Configurar cada tooltip
    tooltips.forEach(container => {
        const tooltip = container.querySelector('.tooltip');
        const trigger = container.querySelector('.tooltip-trigger');
        let hoverTimeout;
        let isMouseIn = false;

        // Calcular mejor posición
        const calculatePosition = () => {
            const rect = trigger.getBoundingClientRect();
            const viewportHeight = window.innerHeight;
            return (rect.top < viewportHeight / 2) ? 'bottom' : 'top';
        };

        // Actualizar posición (optimizado)
        const updatePosition = debounce(() => {
            tooltip.dataset.position = calculatePosition();
        });

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

        // Ocultar con retraso (para enlaces)
        const hideTooltip = () => {
            if (!isMouseIn) {
                hoverTimeout = setTimeout(() => {
                    tooltip.style.visibility = 'hidden';
                    tooltip.style.opacity = '0';
                    trigger.setAttribute('aria-expanded', 'false');
                }, 200);
            }
        };

        // Eventos
        trigger.addEventListener('mouseenter', showTooltip);
        trigger.addEventListener('mouseleave', hideTooltip);
        trigger.addEventListener('focus', showTooltip);
        trigger.addEventListener('blur', hideTooltip);

        tooltip.addEventListener('mouseenter', () => {
            isMouseIn = true;
            clearTimeout(hoverTimeout);
        });

        tooltip.addEventListener('mouseleave', () => {
            isMouseIn = false;
            hideTooltip();
        });

        // Inicialización
        updatePosition();
        window.addEventListener('resize', updatePosition);
        window.addEventListener('scroll', updatePosition, { passive: true });
    });

    // Cerrar al hacer clic fuera
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.tooltip-container') && !e.target.closest('.tooltip a')) {
            document.querySelectorAll('.tooltip').forEach(t => {
                t.style.visibility = 'hidden';
                t.style.opacity = '0';
            });
        }
    });
});