Legge til verktøytips i WordPress uten plugins

Publisert: 25/07/2025 : 12:58 | Oppdatert: 28/07/2025 : 00:18 |

Email Pinterest Telegram Whatsapp Reddit Menéame Mastodon Bluesky
Seleccionar idioma
Legge til verktøytips i WordPress uten plugins
Et eksempel på et verktøytips som brukes her

Begrepet tooltip har ingen entydig oversettelse til engelsk, det kan beskrives som "verktøytips", "hjelpeballong", "popup-beskrivelse" eller til og med "hjelpetekst", avhengig av sammenhengen det brukes i.

Et verktøytips er en popup-melding som vises når du interagerer med et element, enten ved å klikke på det eller ved å holde musepekeren over det. Disse verktøytipsene brukes til å gi tilleggsinformasjon uten å ta opp permanent plass. De er ideelle for å forklare ikoner, tekniske termer eller handlinger i grensesnitt.

Er verktøytips til skade eller nytte for SEO?

Vel, som for nesten alt, er svaret alltid at det kommer an på. Mens SEO-purister advarer om at Google ikke liker "skjult" eller maskert innhold og straffer bruken av det hardt, ville dette være ekstremt i tilfeller av misbruk som kan "kannibalisere" innholdet ditt. Verktøytips kan imidlertid være fordelaktige hvis de brukes med en viss balanse og et minimum av logikk.

Fordeler med å bruke verktøytips

Generelt sett kan disse meldingene, hvis de er vennlige og diskrete, bidra til å forbedre ulike aspekter av brukeropplevelsen. De kan blant annet redusere fluktfrekvensen og forbedre tilgjengeligheten. Det kan også gi mulighet til å bruke flere nøkkelord som ikke naturlig passer inn i hovedinnholdet, noe som bidrar til semantisk SEO.

I tillegg kan de forbedre klikkfrekvensen. Ved å tilby verktøytips i navigasjonen eller oppfordringsknapper kan de veilede brukerne mer effektivt, noe som fører til høyere klikkfrekvens. Men for at alt dette skal være mulig, må noen minimumsretningslinjer følges.

Anbefalinger for utseende, innhold og drift

  • Bruk av HTML-elementer og ARIA-attributter for å sikre at skjermlesere og søkemotorer får tilgang til informasjonen de inneholder.
  • Et verktøytips må være kortfattet. Det er klart at ingen kommer til å lese en enorm mengde informasjon i et popup-vindu, og du vil dekke en stor del av innholdet. Det bør inneholde et minimum av presis og nødvendig informasjon, og den bør ikke være kritisk for brukeren når han eller hun skal utføre eller fullføre en handling.
  • Innholdet bør ikke være overflødig eller gjentas. Sørg for at du gir ytterligere nyttig og nødvendig informasjon, og at den ikke gjentas i innholdet ditt for å unngå "duplisert innhold".
  • Prøv i størst mulig grad å unngå verktøytips som forsvinner når du flytter markøren, eller bruk dem bare i meldinger som ikke inneholder mye informasjon og/eller innhold. Ideelt sett bør de vises per klikk og lukkes når du klikker igjen hvor som helst på skjermen.
  • Sørg for at de er leselige og har riktig størrelse.
  • Ikke legg til tjue forskjellige utforminger av verktøytips-ikoner eller verktøytips-lenker, det skaper bare forvirring. Et fast og konsekvent design vil hjelpe de besøkende med å identifisere dem ved første øyekast.
  • Ikke overdriv, planlegg strategien godt slik at du bare legger dem til der du mener de gjør det lettere å få tilgang til relevant og/eller nødvendig utfyllende informasjon.

Funksjoner og funksjonalitet i koden

Dette . png-bildet med gjennomsiktig bakgrunn er brukt i dette tilfellet.

Her kan du teste det endelige resultatet [tooltip text="Example tooltip used in jrmora.com" position="auto"].

URL-adressen til bildet legges til mellom anførselstegnene på denne linjen:

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

Hvis du velger å endre koden til å bruke et SVG HTML-ikon, slik som dette, vil du lettere kunne leke med farge, bakgrunn, tykkelse osv.

Intelligent automatisk justering av posisjonen for å unngå skjermkanter. Det vil si at når du nærmer deg den øverste kanten, vises verktøytipset nederst, og vice versa.

Fullt funksjonelle lenker kan legges til i verktøytipset med tilpassbare stiler. Selv om det ikke er tilrådelig å legge til lenker, kan det hende at du trenger å gjøre det av og til. Hvis et verktøytips inneholder en lenke, skjules den automatisk med 200 ms forsinkelse for å gjøre det enklere å klikke på den.

Støtte for sikker HTML. Støtter

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

Posisjon, faste og tilpasningsdyktige attributter.

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

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

Oppdatering. Lagt til aria-hidden="true" og role="presentation" i bildet og skjult det dekorative ikonet for skjermlesere.

Redundans unngås med aria-label, som gjør det mulig å tilpasse teksten som er tilgjengelig fra shortocode.

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

Denne løsningen er i samsvar med WCAG 2.1 AA og løser PageSpeed Insights-advarselen om at knappen ikke hadde noe tilgjengelig navn.

Responsiv design.

Mobiltilpasset (klikkbar toggle).

Tilbakestilling ved endring av størrelse, rotering eller forskyvning

De viktigste CSS-klassene:

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

JS' nøkkelfunksjoner:

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

Eksempler på kortkoder:

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

Når det gjelder ytelse:

  1. Forhåndsinnlasting av ressurser: Forhåndsinnlastede bilder og CSS.
  2. Lazy loading: Attributtene loading="lazy" og decoding="async" for bildet.
  3. Betinget innlasting: JS lastes bare inn når kortkoden brukes.
  4. Debounce: Optimalisering av hendelser for endring av størrelse og skrolling.
  5. Optimalisert CSS: Bruk av will-change og moderne enheter (min()).
  6. Bufredeversjoner: Bruk filemtime() for å unngå foreldet bufring.

Denne koden er den jeg har brukt for mine spesifikke behov. Forstå den som et utgangspunkt. Den kan forbedres. Du kan til og med vurdere den uten å bruke Javascript og tilpasse den slik at den også kan brukes på ord i innholdet uten å vise ikonet.

For å bruke den, som alltid, legger du den bare til i functions.php og i mappen assets/css/ og asstes/js/ i malen eller barnetemaet ditt hvis du vil beholde endringene når du oppdaterer malen.

Kode

Dette er strukturen til filene:

din-template/
├─── functions.php (legg til PHP-kode på slutten)
├─── assets/
│ ├──── css/
│ │ └└── tooltip.css (CSS-stiler)
│ └└└└─ js/
│ └└└─── tooltip.js (Javascript)

Kode som skal legges til i malen 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 (må lagres i denne banen /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 (må lagres i banen /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';
            });
        }
    });
});

Email Pinterest Telegram Whatsapp Reddit Menéame Mastodon Bluesky
Related articles

Este blog se aloja en LucusHost

LucusHost, el mejor hosting