Terminil tooltip ei ole ühtset tõlget inglise keelde, seda võib kirjeldada kui "tooltip", "help balloon", "pop-up description" või isegi "help text", sõltuvalt kontekstist, milles seda kasutatakse.
Tööriistavihje on hüpikavihje, mis ilmub, kui elemendiga suheldakse, kas sellele klõpsates või hiirega hõljudes. Neid vihjeid kasutatakse lisateabe andmiseks, ilma et need võtaksid pidevalt ruumi. Sobib ideaalselt ikoonide, tehniliste terminite või tegevuste selgitamiseks kasutajaliideses.
Kas tööriistade tippe kahjustavad või toovad kasu SEO-le?
Noh, nagu peaaegu kõige puhul, on vastus alati, et see sõltub. Kuigi SEO-puristid hoiatavad, et Google'ile ei meeldi "varjatud" või maskeeritud sisu ja ta karistab selle kasutamist karmilt, oleks see äärmus kuritarvitamise puhul, mis võib teie sisu "kannibaliseerida". Siiski võivad tööriistatäpid, mida kasutatakse teatud tasakaalu ja minimaalse loogikaga, olla kasulikud.
Tööriistade kasutamise eelised
Laias laastus võivad need sõnumid, kui need on sõbralikud ja tagasihoidlikud, aidata kaasa kasutajakogemuse eri aspektide parandamisele. Muuhulgas vähendavad nad põrgatuse määra ja parandavad ligipääsetavust. Samuti võib see pakkuda võimalusi kasutada täiendavaid märksõnu, mis ei mahu loomulikult põhisisu sisse, mis aitab semantilist SEO-d.
Lisaks võivad need parandada klikimiskiirust. Kui nad pakuvad navigatsioonis või tegevuste kutsumise nuppudes tööriistade näpunäiteid, saavad nad kasutajaid tõhusamalt juhendada, mis toob kaasa kõrgema klikkimisprotsendi. Kuid selleks, et see kõik oleks võimalik, tuleb järgida mõningaid minimaalseid suuniseid.
Soovitused välimuse, sisu ja toimimise kohta
- HTML-elementide ja ARIA-atribuutide kasutamine, et tagada ekraanilugejatele ja otsingumootoritele ligipääs neis sisalduvale teabele.
- Tööriistavihik peab olema lühike. On selge, et keegi ei loe pop-up-bännerist tohutult palju teavet ja te kaob ka suur osa sisust. See peaks sisaldama minimaalset, täpset ja vajalikku teavet ning see ei tohiks olla kasutaja jaoks kriitilise tähtsusega mingi tegevuse sooritamisel või lõpuleviimisel.
- Sisu ei tohiks olla üleliigne ega korduv, veenduge, et pakute kasulikku ja vajalikku lisateavet ning et see ei korduks teie sisus, et vältida "topelt sisu".
- Püüdke võimalikult palju vältida tööriistakäskudeid, mis kaovad kursori liigutamisel, või kasutage neid ainult sõnumites, mis ei sisalda palju teavet ja/või sisu. Ideaalis peaksid need ilmuma iga klõpsu kohta ja sulguma, kui klõpsate uuesti kusagil ekraanil.
- Veenduge, et need on loetavad ja õiges suuruses.
- Ärge lisage paarkümmend erinevat kujundust tööriistade ikoonide või tööriistade linkide kohta, see tekitab ainult segadust. Fikseeritud ja järjepidev kujundus aitab külastajatel neid esmapilgul tuvastada.
- Ärge liialdage sellega, planeerige oma strateegia hästi, et lisada neid ainult seal, kus need teie arvates hõlbustavad juurdepääsu asjakohasele ja/või vajalikule täiendavale teabele.
Koodi omadused ja funktsioonid
Sel juhul on kasutatud seda läbipaistva taustaga .png pilti.
Siin saate testida lõpptulemust, mis töötab [tooltip text="Example tooltip used in jrmora.com" position="auto"].
Pildi URL lisatakse selles reas jutumärkide vahele:
$default_image = 'URL-de-tu-imagen';Kui te otsustate muuta koodi, et kasutada SVG HTML-ikooni, nagu see siin, saate hõlpsamini mängida värvi, tausta, paksuse jne. osas.
Intelligentne automaatne asukoha reguleerimine ekraani piiride vältimiseks. St. ülemisele servale lähenedes kuvatakse tööriistatulp allapoole ja vivecersa.
Täielikult funktsionaalseid linke saab lisada tööriistatulpile koos kohandatavate stiilidega. Kuigi linkide lisamine ei ole soovitatav, on võimalik, et te peate seda mõnikord tegema. Juhul, kui tooltip sisaldab linki, on selle automaatne peitmine 200 ms viivitusega, et lihtsustada klõpsamist.
Turvaline HTML-tugi. Toetab:
<strong>, <em>, <a>, <br>, <span>Positsioon, fikseeritud ja kohandatavad atribuudid.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightARIA atribuudid (aria-expanded, role="tooltip").
Värskendamine. Lisatud pildile aria-hidden="true" ja role="presentation" ning peidetud dekoratiivne ikoon ekraanilugejate jaoks.
Üleliigsusi välditakse aria-labeliga, mis võimaldab lühikoodist kättesaadava teksti kohandamist.
[tooltip text="Contenido" aria_label="Ver detalles sobre este elemento"]See lahendus vastab WCAG 2.1 AA-le ja lahendab PageSpeed Insights'i hoiatuse, et nupul puudub ligipääsetav nimi.
Reageeriv disain.
Kohandatav mobiiltelefoni (klõpsatav lüliti).
Lähtestamine suuruse muutmisel, pööramisel või nihutamisel
Peamised CSS-klassid:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */JS põhifunktsioonid:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Näiteid lühikoodidest:
[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>"]
Mis puutub jõudlusesse:
- Varade eellaadimine: eellaaditud pildid ja CSS.
- Laisk laadimine: pildi jaoks atribuudid loading="lazy" ja decoding="async".
- Tingimuslik laadimine: JS laaditakse ainult siis, kui lühikoodi kasutatakse.
- Debounce: suuruse muutmise ja kerimise sündmuste optimeerimine.
- Optimeeritud CSS: Will-change ja moodsate ühikute kasutamine (min()).
- Vaikimisi salvestatud versioonid: kasutage failimtime(), et vältida vananenud vahemälu salvestamist.
See kood on see, mida ma olen kasutanud oma konkreetsete vajaduste jaoks. Mõista seda kui lähtepunkti. Seda saab täiustada. Võite kaaluda seda isegi ilma Javascriptita ja kohandada seda nii, et seda saab rakendada ka sõnadele sisus ilma ikooni näitamata.
Selle kasutamiseks, nagu alati, lisage see lihtsalt functions.php ja oma malli või lapse teema kaustadesse assets/css/ ja asstes/js/, kui soovite oma malli uuendamisel muudatusi säilitada.
Kood
See on failide struktuur:
teie-mudel/
├─ functions.php (lisage PHP-kood lõppu)
├─ varad/
│ ├─ css/
│ │ └└─ tooltip.css (CSS stiilid)
│ └└└── js/
│ └└└─ tooltip.js (JavaScript)
Kood lisada malli 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 (peab olema salvestatud sellesse teekonda /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 (peab olema salvestatud teekonda /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';
});
}
});
});
