Termenul tooltip nu are o traducere unică în limba engleză, putând fi descris ca "tooltip", "help balloon", "pop-up description" sau chiar "help text", în funcție de contextul în care este utilizat.
Un tooltip este un mesaj pop-up care apare atunci când se interacționează cu un element, fie făcând clic pe acesta, fie trecând cu mouse-ul peste el. Aceste tooltips sunt utilizate pentru a furniza informații suplimentare fără a ocupa spațiu permanent. Sunt ideale pentru explicarea pictogramelor, a termenilor tehnici sau a acțiunilor din interfețe.
Tooltips dăunează sau avantajează SEO?
Ei bine, ca pentru aproape orice, răspunsul este întotdeauna depinde. În timp ce puriștii SEO avertizează că Google nu apreciază conținutul "ascuns" sau mascat și penalizează dur utilizarea acestuia, aceasta ar fi o extremă pentru cazurile de abuz care ar putea "canibaliza" conținutul dvs. Cu toate acestea, tooltips-urile, utilizate cu un anumit echilibru și un minim de logică, pot fi benefice.
Avantajele utilizării tooltips
În general, aceste mesaje, dacă sunt prietenoase și discrete, pot contribui la îmbunătățirea diferitelor aspecte ale experienței utilizatorului. Printre altele, ele reduc ratele de respingere și îmbunătățesc accesibilitatea. De asemenea, pot oferi oportunități de a utiliza cuvinte-cheie suplimentare care nu se încadrează în mod natural în conținutul principal, ceea ce contribuie la SEO semantic.
În plus, acestea pot îmbunătăți ratele de click-through. Prin oferirea de tooltips în butoanele de navigare sau de apel la acțiune, acestea pot ghida utilizatorii mai eficient, ceea ce duce la creșterea ratelor de click-through. Dar pentru ca toate acestea să fie posibile, trebuie respectate câteva linii directoare minime.
Recomandări privind aspectul, conținutul și funcționarea
- Utilizarea elementelor HTML și a atributelor ARIA pentru a garanta că cititoarele de ecran și motoarele de căutare pot accesa informațiile pe care le conțin.
- Un tooltip trebuie să fie scurt. Evident, nimeni nu va citi o cantitate uriașă de informații într-un pop-up și veți acoperi o mare parte din conținut. Acesta trebuie să conțină informațiile minime, precise și necesare, iar acestea nu trebuie să fie critice pentru utilizator atunci când efectuează sau finalizează vreo acțiune.
- Conținutul nu trebuie să fie redundant sau repetat, asigurați-vă că furnizați informații suplimentare utile și necesare și că acestea nu sunt repetate în conținutul dvs. pentru a evita "conținutul duplicat".
- Încercați să evitați pe cât posibil tooltips-urile care dispar atunci când mișcați cursorul sau folosiți-le numai în mesajele care nu conțin multe informații și/sau conținut. În mod ideal, acestea ar trebui să fie afișate per clic și să se închidă atunci când faceți clic din nou oriunde pe ecran.
- Asigurați-vă că acestea sunt lizibile și de dimensiunea corectă.
- Nu adăugați douăzeci de modele diferite de pictograme tooltip sau linkuri tooltip, acest lucru creează doar confuzie. Un design fix și coerent va ajuta vizitatorii să le identifice la prima vedere.
- Nu exagerați, planificați-vă bine strategia pentru a le adăuga doar acolo unde considerați că facilitează accesul la informații complementare relevante și/sau necesare.
Caracteristici și funcționalități ale codului
Pentru acest caz a fost utilizată această imagine.png cu fundal transparent.
Aici puteți testa rezultatul final care funcționează [tooltip text="Exemplu de tooltip utilizat în jrmora.com" position="auto"].
URL-ul imaginii este adăugat între ghilimelele simple de pe această linie:
$default_image = 'URL-de-tu-imagen';Dacă alegeți să modificați codul pentru a utiliza o pictogramă HTML SVG, precum aceasta, veți putea să vă jucați cu culoarea, fundalul, grosimea etc. mai ușor.
Reglare automată inteligentă a poziției pentru a evita marginile ecranului. De exemplu, atunci când vă apropiați de marginea de sus, tooltip-ul este afișat în partea de jos și vivecersa.
În tooltip pot fi adăugate linkuri complet funcționale cu stiluri personalizabile. Deși nu este recomandabil să adăugați linkuri, este posibil să fiți nevoit să faceți acest lucru ocazional. În cazul în care un tooltip conține un link, există o întârziere de 200 ms în ascunderea automată pentru a face mai ușor clic.
Suport HTML securizat. Suportă:
<strong>, <em>, <a>, <br>, <span>Poziția, atributele fixe și adaptabile.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightAtribute ARIA (aria-expanded, role="tooltip").
Design receptiv.
Adaptabil la telefoanele mobile (comutator clicabil).
Resetare la redimensionare, rotire sau deplasare
Principalele clase CSS:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */Funcțiile cheie ale JS:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Exemple de coduri scurte:
[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>"]
Acest cod este cel pe care l-am folosit pentru nevoile mele specifice. Înțelegeți-l ca pe un punct de plecare. Este foarte perfectibil. Puteți separa CSS-ul și JS-ul (sau chiar să-l luați în considerare fără a utiliza Javascript) și să-l adaptați astfel încât să poată fi aplicat și cuvintelor din conținut fără a afișa pictograma.
Pentru a o utiliza, ca întotdeauna, trebuie doar să o adăugați la functions.php al șablonului dvs. sau al temei copil dacă doriți să păstrați modificările atunci când șablonul dvs. este actualizat.
Cod
/**
* 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');
