A tooltip kifejezésnek nincs egyértelmű angol nyelvű fordítása, a szövegkörnyezettől függően "tooltip", "help balloon", "pop-up description" vagy akár "help text" is lehet.
A tooltip egy felugró üzenet, amely akkor jelenik meg, amikor egy elemmel interakcióba lépünk, akár az elemre kattintva, akár az egér lebegtetésével. Ezek a tooltipek arra szolgálnak, hogy további információkat nyújtsanak anélkül, hogy állandó helyet foglalnának. Ideális ikonok, műszaki kifejezések vagy műveletek magyarázatára a felhasználói felületeken.
Károsak vagy előnyösek a tooltipek a SEO számára?
Nos, mint szinte mindenre, a válasz mindig az, hogy attól függ. Bár a SEO-puristák arra figyelmeztetnek, hogy a Google nem szereti a "rejtett" vagy maszkolt tartalmakat, és keményen bünteti azok használatát, ez szélsőséges lenne a visszaélések olyan eseteiben , amelyek "kannibalizálhatják" a tartalmat. A tooltipek azonban bizonyos egyensúlyban és minimális logikával használva hasznosak lehetnek.
A tooltipek használatának előnyei
Általánosságban elmondható, hogy ezek az üzenetek, ha barátságosak és nem feltűnőek, hozzájárulhatnak a felhasználói élmény különböző aspektusainak javításához. Többek között csökkentik a visszafordulási arányt és javítják a hozzáférhetőséget. Lehetőséget nyújthatnak olyan további kulcsszavak használatára is, amelyek nem illeszkednek természetesen a fő tartalomba, ami segít a szemantikus SEO-ban.
Emellett javíthatják az átkattintási arányt. Ha a navigációban vagy a cselekvésre hívó gombokban tooltipeket kínálnak, hatékonyabban tudják irányítani a felhasználókat, ami magasabb átkattintási arányt eredményez. Ahhoz azonban, hogy mindez lehetséges legyen, néhány minimális irányelvet be kell tartani.
Megjelenésre, tartalomra és működésre vonatkozó ajánlások
- HTML elemek és ARIA-attribútumok használata annak biztosítása érdekében, hogy a képernyőolvasók és a keresőmotorok hozzáférjenek a bennük található információkhoz.
- A tooltipnek rövidnek kell lennie. Nyilvánvaló, hogy senki sem fog hatalmas mennyiségű információt elolvasni egy felugró ablakban, és a tartalom nagy részét le fogja fedni. A minimális, pontos és szükséges információkat kell tartalmaznia, és ez nem lehet kritikus a felhasználó számára, amikor bármilyen műveletet végrehajt vagy befejez.
- A tartalom nem lehet felesleges vagy ismétlődő, győződjön meg róla, hogy további hasznos és szükséges információkat nyújt, és hogy a "duplikált tartalom" elkerülése érdekében nem ismétlődik a tartalomban.
- Próbálja meg minél inkább elkerülni az olyan tooltipeket, amelyek eltűnnek a kurzor mozgatásakor, vagy csak olyan üzenetekben használja őket, amelyek nem tartalmaznak sok információt és/vagy tartalmat. Ideális esetben kattintásonként jelennek meg, és akkor záródnak be, amikor újra rákattintasz a képernyő bármely pontjára.
- Győződjön meg róla, hogy olvashatóak és megfelelő méretűek.
- Ne adjon hozzá húsz különböző designú tooltip ikont vagy tooltip linket, ez csak zavart okoz. A rögzített és következetes dizájn segít látogatóinak első pillantásra azonosítani őket.
- Ne vigye túlzásba, tervezze meg a stratégiáját, hogy csak ott adja hozzá őket, ahol úgy gondolja, hogy megkönnyítik a releváns és/vagy szükséges kiegészítő információkhoz való hozzáférést.
A kód jellemzői és funkciói
Ebben az esetben ezt az átlátszó hátterű .png képet használtuk.
Itt tesztelheti a végeredményt [tooltip text="Példa a jrmora.com-ban használt tooltip-re" position="auto"].
A kép URL-címe ebben a sorban szimpla idézőjelek közé kerül:
$default_image = 'URL-de-tu-imagen';Ha úgy dönt, hogy módosítja a kódot, hogy egy SVG HTML ikont használjon, mint ez, akkor könnyebben játszhat a színnel, háttérrel, vastagsággal stb.
Intelligens automatikus pozícióbeállítás a képernyő határainak elkerülése érdekében. Vagyis a felső széléhez közeledve az eszköztár alul jelenik meg, és vivecersa.
A tooltipben teljesen funkcionális linkek adhatók hozzá, testreszabható stílusokkal. Bár nem tanácsos linkeket hozzáadni, előfordulhat, hogy alkalomadtán szükség lehet rá. Abban az esetben, ha egy tooltip tartalmaz egy linket, 200 ms késleltetéssel automatikusan elrejti azt, hogy könnyebb legyen rákattintani.
Biztonságos HTML-támogatás. Támogatások:
<strong>, <em>, <a>, <br>, <span>Pozíció, rögzített és adaptálható attribútumok.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightARIA-attribútumok (aria-expanded, role="tooltip").
Responsive design.
Mobilra adaptálható (kattintható kapcsoló).
Visszaállítás átméretezéskor, forgatáskor vagy eltoláskor
Fő CSS osztályok:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */A JS legfontosabb funkciói:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Példák a rövidkódokra:
[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>"]
Ezt a kódot használtam az én speciális igényeimhez. Értsd meg kiindulási pontként. Nagyon sokat lehet rajta javítani. Elválaszthatja a CSS-t és a JS-t (vagy akár a Javascript használata nélkül is megfontolhatja), és átalakíthatja úgy, hogy a tartalomban lévő szavakra is alkalmazható legyen az ikon megjelenítése nélkül.
Használatához, mint mindig, csak add hozzá a functions.php a sablonodhoz vagy a gyermek témádhoz, ha meg akarod tartani a változásokat, amikor a sablonod frissül.
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');
