Udtrykket tooltip har ikke en entydig oversættelse til engelsk, det kan beskrives som "værktøjstip", "hjælpeballon", "popup-beskrivelse" eller endda "hjælpetekst" afhængigt af den sammenhæng, det bruges i.
Et værktøjstip er en pop op-meddelelse, der vises, når man interagerer med et element, enten ved at klikke på det eller ved at holde musen over det. Disse tooltips bruges til at give yderligere oplysninger uden at optage permanent plads. De er ideelle til at forklare ikoner, tekniske termer eller handlinger i grænseflader.
Skader eller gavner tooltips SEO?
Som med næsten alt andet er svaret altid, at det kommer an på det. Mens SEO-purister advarer om, at Google ikke bryder sig om "skjult" eller maskeret indhold og straffer brugen af det hårdt, ville det være ekstremt i tilfælde af misbrug , der kunne "kannibalisere" dit indhold. Men værktøjstips, der bruges med en vis balance og et minimum af logik, kan være gavnlige.
Fordele ved at bruge værktøjstip
Generelt set kan disse beskeder, hvis de er venlige og diskrete, bidrage til at forbedre forskellige aspekter af brugeroplevelsen. De reducerer blandt andet afvisningsprocenten og forbedrer tilgængeligheden. Det kan også give mulighed for at bruge ekstra søgeord, som ikke naturligt passer ind i hovedindholdet, hvilket hjælper med semantisk SEO.
Desuden kan de forbedre klikraten. Ved at tilbyde værktøjstips i navigationen eller opfordringsknapper kan de guide brugerne mere effektivt, hvilket fører til højere klikrater. Men for at alt dette skal være muligt, skal nogle få minimumsretningslinjer følges.
Anbefalinger for udseende, indhold og betjening
- Brug af HTML-elementer og ARIA-attributter for at sikre, at skærmlæsere og søgemaskiner kan få adgang til den information, de indeholder.
- Et tooltip skal være kort. Det er klart, at ingen vil læse en stor mængde information i en pop-up, og du vil dække en stor del af indholdet. Det skal indeholde et minimum af præcis og nødvendig information, og det skal ikke være kritisk for brugeren, når han/hun udfører eller afslutter en handling.
- Indholdet bør ikke være overflødigt eller gentaget, så sørg for, at du giver yderligere nyttige og nødvendige oplysninger, og at de ikke gentages i dit indhold for at undgå "duplikeret indhold".
- Prøv så vidt muligt at undgå værktøjstips, der forsvinder, når du flytter markøren, eller brug dem kun i meddelelser, der ikke indeholder mange oplysninger og/eller meget indhold. Ideelt set skal de vises pr. klik og lukkes, når du klikker igen et vilkårligt sted på skærmen.
- Sørg for, at de er læselige og har den rigtige størrelse.
- Lad være med at tilføje tyve forskellige designs af tooltip-ikoner eller tooltip-links, det skaber kun forvirring. Et fast og konsekvent design vil hjælpe dine besøgende med at identificere dem ved første øjekast.
- Lad være med at overdrive, planlæg din strategi godt, så du kun tilføjer dem, hvor du mener, de letter adgangen til relevant og/eller nødvendig supplerende information.
Kodens egenskaber og funktionaliteter
Dette . png-billede med gennemsigtig baggrund er blevet brugt til dette tilfælde.
Her kan du teste det endelige resultat, der fungerer [tooltip text="Example tooltip used in jrmora.com" position="auto"].
Billedets URL tilføjes mellem de enkelte anførselstegn på denne linje:
$default_image = 'URL-de-tu-imagen';Hvis du vælger at ændre koden til at bruge et SVG HTML-ikon som dette, kan du lettere lege med farve, baggrund, tykkelse osv.
Intelligent automatisk positionsjustering for at undgå skærmkanter. Dvs. når man nærmer sig den øverste kant, vises værktøjstippet i bunden og vivecersa.
Fuldt funktionsdygtige links kan tilføjes i værktøjstippet med stilarter, der kan tilpasses. Det er ikke tilrådeligt at tilføje links, men det er muligt, at du får brug for det en gang imellem. Hvis et værktøjstip indeholder et link, skjules det automatisk med 200 ms forsinkelse for at gøre det lettere at klikke.
Understøttelse af sikker HTML. Understøtter:
<strong>, <em>, <a>, <br>, <span>Position, faste og tilpasningsdygtige egenskaber.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightARIA-attributter (aria-expanded, role="tooltip").
Responsivt design.
Kan tilpasses til mobilen (klikbar toggle).
Nulstilling ved ændring af størrelse, rotation eller skift
De vigtigste CSS-klasser:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */JS' nøglefunktioner:
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>"]
Denne kode er den, jeg har brugt til mine specifikke behov. Forstå den som et udgangspunkt. Den kan i høj grad forbedres. Du kan adskille CSS og JS (eller endda overveje det uden at bruge Javascript) og tilpasse det, så det også kan anvendes på ord i indholdet uden at vise ikonet.
For at bruge den skal du som altid bare tilføje den til functions.php i din skabelon eller dit child theme, hvis du vil beholde ændringerne, når din skabelon opdateres.
Kode
/**
* 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');
