Termen tooltip har inte en unik översättning till engelska, utan kan beskrivas som "tooltip", "help balloon", "pop-up description" eller till och med "help text" beroende på i vilket sammanhang den används.
En tooltip är ett popup-meddelande som visas när du interagerar med ett element, antingen genom att klicka på det eller genom att hålla muspekaren över det. Dessa tooltips används för att ge ytterligare information utan att ta upp permanent utrymme. Perfekt för att förklara ikoner, tekniska termer eller åtgärder i gränssnitt.
Är verktygstips till skada eller nytta för SEO?
Som för nästan allt annat är svaret alltid att det beror på. Medan SEO-purister varnar för att Google inte gillar "dolt" eller maskerat innehåll och straffar dess användning hårt, skulle detta vara extremt för fall av missbruk som skulle kunna "kannibalisera" ditt innehåll. Verktygstips kan dock vara fördelaktiga om de används med en viss balans och ett minimum av logik.
Fördelar med att använda verktygstips
I stort sett kan dessa meddelanden, om de är vänliga och diskreta, bidra till att förbättra olika aspekter av användarupplevelsen. De minskar bland annat avvisningsfrekvensen och förbättrar tillgängligheten. Det kan också ge möjligheter att använda ytterligare nyckelord som inte naturligt passar in i huvudinnehållet, vilket hjälper till med semantisk SEO.
Dessutom kan de förbättra klickfrekvensen. Genom att erbjuda verktygstips i navigeringen eller uppmaningsknappar kan de vägleda användarna mer effektivt, vilket leder till högre klickfrekvenser. Men för att allt detta ska vara möjligt måste några minimiregler följas.
Rekommendationer för utseende, innehåll och användning
- Användning av HTML-element och ARIA-attribut för att säkerställa att skärmläsare och sökmotorer kan komma åt den information som de innehåller.
- En tooltip måste vara kortfattad. Självklart kommer ingen att läsa en stor mängd information i ett popup-fönster och du kommer att täcka en stor del av innehållet. Det bör innehålla minsta möjliga, exakta och nödvändiga information, och detta bör inte vara avgörande för användaren när han eller hon utför eller slutför någon åtgärd.
- Innehållet ska inte vara överflödigt eller upprepas, se till att du tillhandahåller ytterligare användbar och nödvändig information och att den inte upprepas i ditt innehåll för att undvika "duplicerat innehåll".
- Försök i möjligaste mån undvika tooltips som försvinner när du flyttar markören eller använd dem endast i meddelanden som inte innehåller mycket information och/eller innehåll. Helst ska de visas per klick och stängas när du klickar igen var som helst på skärmen.
- Se till att de är läsliga och har rätt storlek.
- Lägg inte till tjugo olika designer av tooltip-ikoner eller tooltip-länkar, det skapar bara förvirring. En fast och konsekvent design hjälper dina besökare att identifiera dem vid första anblicken.
- Överdriv inte, utan planera din strategi väl så att du bara lägger till dem där du tror att de underlättar tillgången till relevant och/eller nödvändig kompletterande information.
Kodens egenskaper och funktionaliteter
Denna . png-bild med transparent bakgrund har använts för detta fall.
Här kan du testa det slutliga resultatet som fungerar [tooltip text="Exempel på tooltip som används i jrmora.com" position="auto"].
Bildens URL läggs till mellan citationstecknen på den här raden:
$default_image = 'URL-de-tu-imagen';Om du väljer att modifiera koden så att den använder en SVG HTML-ikon, som den här, kan du lättare leka med färg, bakgrund, tjocklek etc.
Intelligent automatisk positionsjustering för att undvika skärmkanter. Dvs. när du närmar dig den övre kanten visas verktygstipset längst ner och vivecersa.
Fullt fungerande länkar kan läggas till i verktygstipset med anpassningsbara stilar. Även om det inte är tillrådligt att lägga till länkar är det möjligt att du kan behöva göra det ibland. Om en tooltip innehåller en länk döljs den automatiskt med 200 ms fördröjning för att göra det lättare att klicka på den.
Stöd för säker HTML. Stödjer:
<strong>, <em>, <a>, <br>, <span>Position, fasta och anpassningsbara attribut.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightARIA-attribut (aria-expanded, role="tooltip").
Responsiv design.
Mobilanpassningsbar (klickbar toggle).
Återställning vid storleksändring, rotation eller förskjutning
Huvudsakliga 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:s viktigaste funktioner:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Exempel 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>"]
Den här koden är den jag har använt för mina specifika behov. Förstå den som en startpunkt. Den är mycket förbättringsbar. Du kan separera CSS och JS (eller till och med överväga det utan att använda Javascript) och anpassa det så att det också kan tillämpas på ord i innehållet utan att visa ikonen.
För att använda den, som alltid, lägg bara till den i functions.php i din mall eller ditt barntema om du vill behålla ändringarna när din mall uppdateras.
Kod
/**
* 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');
