Termin tooltip nie ma jednoznacznego tłumaczenia na język angielski, może być opisany jako "tooltip", "help balloon", "pop-up description" lub nawet "help text" w zależności od kontekstu, w którym jest używany.
Podpowiedź to wyskakujący komunikat, który pojawia się podczas interakcji z elementem, poprzez kliknięcie go lub najechanie myszą. Te podpowiedzi są używane do dostarczania dodatkowych informacji bez zajmowania stałego miejsca. Idealne do wyjaśniania ikon, terminów technicznych lub działań w interfejsach.
Czy paski narzędzi szkodzą czy pomagają SEO?
Cóż, jak w przypadku prawie wszystkiego, odpowiedź zawsze zależy. Podczas gdy puryści SEO ostrzegają, że Google nie lubi "ukrytych" lub zamaskowanych treści i surowo karze ich użycie, byłoby to skrajne w przypadku nadużyć , które mogłyby "kanibalizować" treść. Jednak etykiety narzędzi, używane z pewną równowagą i minimalną logiką, mogą być korzystne.
Zalety korzystania z etykiet narzędzi
Ogólnie rzecz biorąc, komunikaty te, jeśli są przyjazne i dyskretne, mogą przyczynić się do poprawy różnych aspektów doświadczenia użytkownika. Między innymi zmniejszają współczynnik odrzuceń i poprawiają dostępność. Mogą również zapewniać możliwość użycia dodatkowych słów kluczowych, które nie pasują naturalnie do głównej treści, co pomaga w semantycznym SEO.
Ponadto mogą one poprawić współczynnik klikalności. Oferując podpowiedzi w nawigacji lub przyciski wezwania do działania, mogą skuteczniej prowadzić użytkowników, prowadząc do wyższych współczynników klikalności. Ale aby to wszystko było możliwe, należy przestrzegać kilku minimalnych wytycznych.
Zalecenia dotyczące wyglądu, zawartości i działania
- Korzystanie z elementów HTML i atrybutów ARIA w celu zapewnienia czytnikom ekranu i wyszukiwarkom dostępu do zawartych w nich informacji.
- Tooltip musi być zwięzły. Oczywiście nikt nie będzie czytał ogromnej ilości informacji w wyskakującym okienku, a Ty będziesz zajmował dużą część treści. Powinien zawierać minimalne, precyzyjne i niezbędne informacje, które nie powinny być krytyczne dla użytkownika podczas wykonywania lub kończenia akcji.
- Treści nie powinny być zbędne ani powtarzane, upewnij się, że dostarczasz dodatkowych przydatnych i niezbędnych informacji i że nie są one powtarzane w treści, aby uniknąć "duplicate content".
- Staraj się unikać podpowiedzi, które znikają po przesunięciu kursora lub używaj ich tylko w wiadomościach, które nie zawierają wielu informacji i/lub treści. Najlepiej byłoby, gdyby były one wyświetlane po kliknięciu i zamykane po ponownym kliknięciu w dowolnym miejscu na ekranie.
- Upewnij się, że są czytelne i mają odpowiedni rozmiar.
- Nie dodawaj dwudziestu różnych wzorów ikon podpowiedzi lub linków podpowiedzi, to tylko wprowadza zamieszanie. Stały i spójny projekt pomoże odwiedzającym zidentyfikować je na pierwszy rzut oka.
- Nie przesadzaj, dobrze zaplanuj swoją strategię, aby dodać je tylko tam, gdzie uważasz, że ułatwiają dostęp do istotnych i/lub niezbędnych informacji uzupełniających.
Cechy i funkcjonalności kodu
W tym przypadku użyto obrazu.png z przezroczystym tłem.
Tutaj możesz przetestować efekt końcowy [tooltip text="Example tooltip used in jrmora.com" position="auto"].
Adres URL obrazu jest dodawany między pojedynczymi cudzysłowami w tym wierszu:
$default_image = 'URL-de-tu-imagen';Jeśli zdecydujesz się zmodyfikować kod, aby użyć ikony SVG HTML, takiej jak ta, będziesz mógł łatwiej bawić się kolorem, tłem, grubością itp.
Inteligentne automatyczne dostosowywanie pozycji w celu uniknięcia krawędzi ekranu. Tzn. gdy zbliżasz się do górnej krawędzi, podpowiedź jest wyświetlana na dole i vice versa.
W pełni funkcjonalne linki można dodawać w etykiecie narzędzia z dostosowywanymi stylami. Chociaż dodawanie linków nie jest zalecane, może się zdarzyć, że będzie to konieczne. W przypadku, gdy podpowiedź zawiera link, jego automatyczne ukrywanie jest opóźnione o 200 ms, aby ułatwić kliknięcie.
Bezpieczna obsługa HTML. Obsługa:
<strong>, <em>, <a>, <br>, <span>Pozycja, atrybuty stałe i adaptowalne.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightAtrybuty ARIA (aria-expanded, role="tooltip").
Projekt responsywny.
Możliwość dostosowania do urządzeń mobilnych (klikalny przełącznik).
Resetowanie podczas zmiany rozmiaru, obracania lub przesuwania
Główne klasy CSS:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */Kluczowe funkcje JS:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Przykłady skrótów:
[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>"]
Ten kod jest tym, którego użyłem do moich konkretnych potrzeb. Należy go traktować jako punkt wyjścia. Jest on bardzo podatny na ulepszenia. Możesz oddzielić CSS i JS (lub nawet rozważyć to bez użycia Javascript) i dostosować go tak, aby można go było również zastosować do słów w treści bez wyświetlania ikony.
Aby go użyć, jak zawsze, wystarczy dodać go do functions.php szablonu lub motywu potomnego, jeśli chcesz zachować zmiany po aktualizacji szablonu.
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');
