Терминът tooltip няма уникален превод на български език, той може да бъде описан като "подсказка", "балон за помощ", "изскачащо описание" или дори "текст за помощ" в зависимост от контекста, в който се използва.
Указанието за инструменти е изскачащо съобщение, което се появява при взаимодействие с даден елемент, като щракнете върху него или като задържите мишката. Тези съвети за инструменти се използват за предоставяне на допълнителна информация, без да заемат постоянно място. Идеални са за обяснение на икони, технически термини или действия в интерфейсите.
Вредят ли или са от полза за SEO етикетите?
Е, както при почти всичко, отговорът винаги е, че зависи. Въпреки че SEO пуристите предупреждават, че Google не харесва "скритото" или маскирано съдържание и наказва строго използването му, това би било крайност за случаите на злоупотреба , която може да "канибализира" съдържанието ви. Въпреки това, tooltips, използвани с определен баланс и минимум логика, могат да бъдат полезни.
Предимства на използването на показалци на инструменти
Най-общо казано, тези съобщения, ако са приятелски настроени и ненатрапчиви, могат да допринесат за подобряване на различни аспекти на потребителското изживяване. Наред с други неща, те намаляват процента на отпадане и подобряват достъпността. Те могат също така да предложат възможности за използване на допълнителни ключови думи, които не се вписват естествено в основното съдържание, което помага за семантичната SEO оптимизация.
Освен това те могат да подобрят процента на кликванията. Като предлагат подсказки в навигацията или бутони за призив за действие, те могат да насочват потребителите по-ефективно, което води до по-високи проценти на кликвания. Но за да бъде възможно всичко това, трябва да се спазват няколко минимални насоки.
Препоръки за външния вид, съдържанието и функционирането
- Използване на елементи на HTML и атрибути ARIA, за да се гарантира, че четците на екрани и търсачките имат достъп до съдържащата се в тях информация.
- Указанието за инструменти трябва да бъде кратко. Очевидно е, че никой няма да прочете огромно количество информация в изскачащ прозорец и вие ще покриете голяма част от съдържанието. Той трябва да съдържа минималната, точна и необходима информация, като тя не трябва да е от решаващо значение за потребителя при извършване или завършване на някакво действие.
- Съдържанието не трябва да е излишно или да се повтаря, уверете се, че предоставяте допълнителна полезна и необходима информация и че тя не се повтаря в съдържанието ви, за да избегнете "дублиране на съдържанието".
- Опитайте се да избягвате, доколкото е възможно, показалците на инструменти, които изчезват, когато преместите курсора, или ги използвайте само в съобщения, които не съдържат много информация и/или съдържание. В идеалния случай те трябва да се показват при всяко щракване и да се затварят, когато щракнете отново където и да е на екрана.
- Уверете се, че те са четливи и с подходящ размер.
- Не добавяйте двадесет различни дизайна на икони с подсказки или връзки с подсказки - това само създава объркване. Фиксираният и последователен дизайн ще помогне на посетителите ви да ги идентифицират от пръв поглед.
- Не прекалявайте, планирайте добре стратегията си, за да ги добавяте само там, където смятате, че улесняват достъпа до подходяща и/или необходима допълнителна информация.
Характеристики и функционалности на кода
За този случай е използвано това .png изображение с прозрачен фон.
Тук можете да изпробвате крайния резултат, който работи [tooltip text="Пример за tooltip, използван в jrmora.com" position="auto"].
URL адресът на изображението се добавя между единичните кавички на този ред:
$default_image = 'URL-de-tu-imagen';Ако решите да промените кода, за да използвате SVG HTML икона, като тази, ще можете по-лесно да променяте цвета, фона, дебелината и т.н.
Интелигентно автоматично регулиране на позицията, за да се избегнат ръбовете на екрана. Т.е. при приближаване към горния ръб подсказката за инструменти се показва в долната част и обратно.
В подсказката могат да се добавят напълно функционални връзки с възможност за персонализиране на стиловете. Въпреки че не е препоръчително да добавяте връзки, възможно е понякога да се наложи да го направите. В случай че подсказката за инструменти съдържа връзка, има 200 ms забавяне на автоматичното ѝ скриване, за да се улесни щракването върху нея.
Поддръжка на защитен HTML. Поддържа:
<strong>, <em>, <a>, <br>, <span>Позиция, фиксирани и адаптивни атрибути.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightАтрибути ARIA (aria-expanded, role="tooltip").
Актуализация. Добавени са aria-hidden="true" и role="presentation" към изображението и е скрита декоративната икона за екранни четци.
Излишният текст се избягва с помощта на aria-label, който позволява персонализиране на текста, достъпен от краткия код.
[tooltip text="Contenido" aria_label="Ver detalles sobre este elemento"]Това решение отговаря на изискванията на WCAG 2.1 AA и премахва предупреждението на PageSpeed Insights, че бутонът няма достъпно име.
Отзивчив дизайн.
Адаптивност към мобилни устройства (кликване върху превключвател).
Нулиране при промяна на размера, завъртане или преместване
Основни CSS класове:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */Основни функции на СП:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Примери за кратки кодове:
[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>"]
По отношение на производителността:
- Предварително зареждане на активи: Предварително заредени изображения и CSS.
- Мързеливо зареждане: Атрибути loading="lazy" и decoding="async" за изображението.
- Условно зареждане: JS се зарежда само когато се използва шорткодът.
- Debounce: Оптимизиране на събитията за промяна на размера и превъртане.
- Оптимизиран CSS: Използване на will-change и съвременни единици (min()).
- Кеширани версии: Използвайте filemtime(), за да избегнете остаряло кеширане.
Този код използвах за конкретните си нужди. Разберете го като отправна точка. Той може да бъде подобрен. Можете дори да го разгледате, без да използвате Javascript, и да го адаптирате така, че да може да се прилага и към думи в съдържанието, без да се показва иконата.
За да го използвате, както винаги, просто го добавете в functions.php и в папките assets/css/ и asstes/js/ на вашия шаблон или на вашата дъщерна тема, ако искате да запазите промените при актуализиране на шаблона.
Код
Това е структурата на файловете:
вашия шаблон/
├── functions.php (добавете PHP код в края)
├── assets/
│ ├─── css/
│ │ │ └└─ tooltip.css (CSS стилове)
│ └└└── js/
│ └└─── tooltip.js (JavaScript)
Код за добавяне в шаблона functions.php
/**
* Shortcode para tooltip accesible y optimizado
* Uso: [tooltip text="Texto" position="auto" color="#6a0000" aria_label="Descripción"]
*/
function accessible_tooltip_shortcode($atts) {
$default_image = 'https://jrmora.com/wp-content/uploads/2025/07/tooltip-negro.png';
$atts = shortcode_atts(
array(
'text' => __('Información adicional', 'text-domain'),
'position' => 'auto',
'color' => '#6a0000',
'shadow' => '#9c9c9c',
'width' => '18px',
'id' => 'tooltip-' . uniqid(),
'aria_label' => __('Mostrar información adicional', 'text-domain')
),
$atts,
'tooltip'
);
// HTML permitido (seguro)
$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']);
$aria_label = esc_attr($atts['aria_label']);
// Preload para la imagen (mejora rendimiento)
add_action('wp_head', function() use ($default_image) {
echo '<link rel="preload" href="' . esc_url($default_image) . '" as="image">';
});
return '
<span class="tooltip-container" data-position="' . esc_attr($position) . '">
<button class="tooltip-trigger"
aria-describedby="' . $id . '"
aria-expanded="false"
aria-label="' . $aria_label . '">
<img src="' . esc_url($default_image) . '"
width="' . $width . '"
alt=""
aria-hidden="true"
loading="lazy"
decoding="async"
role="presentation"/>
</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>';
}
add_shortcode('tooltip', 'accessible_tooltip_shortcode');
/**
* Carga optimizada de assets
*/
function load_tooltip_assets() {
global $post;
// CSS externo
wp_enqueue_style(
'tooltip-css',
get_theme_file_uri('/assets/css/tooltip.css'),
array(),
filemtime(get_theme_file_path('/assets/css/tooltip.css'))
);
// JS solo si se usa el shortcode
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'tooltip')) {
wp_enqueue_script(
'tooltip-js',
get_theme_file_uri('/assets/js/tooltip.js'),
array(),
filemtime(get_theme_file_path('/assets/js/tooltip.js')),
true
);
}
}
add_action('wp_enqueue_scripts', 'load_tooltip_assets');CSS / tooltip.css (трябва да бъде запазен в този път /assets/css/tooltip.css)
/* Contenedor principal */
.tooltip-container {
display: inline-block;
position: relative;
vertical-align: middle;
}
/* Botón activador */
.tooltip-trigger {
background: none;
border: none;
padding: 0;
margin: 0 2px;
cursor: pointer;
line-height: 1;
}
/* Caja del tooltip */
.tooltip {
position: absolute;
color: #fff;
padding: 10px 12px;
border-radius: 4px;
font-size: 14px;
line-height: 1.5;
width: 220px;
max-width: min(90vw, 220px);
text-align: left;
visibility: hidden;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 100000;
pointer-events: none;
will-change: transform, opacity;
}
/* Flecha indicadora */
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
}
/* Posiciones */
.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;
}
/* Interacción */
.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus + .tooltip,
.tooltip-trigger[aria-expanded="true"] + .tooltip {
visibility: visible;
opacity: 1;
}
/* Enlaces dentro del tooltip */
.tooltip a {
color: #fff !important;
text-decoration: underline;
pointer-events: auto !important;
}
/* Focus para accesibilidad */
.tooltip-trigger:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}Javascript / Tooltip.js (Трябва да бъде запазен в пътя /assets/js/tooltip.js)
document.addEventListener("DOMContentLoaded", () => {
const tooltips = document.querySelectorAll('.tooltip-container[data-position="auto"]');
if (!tooltips.length) return;
// Debounce para optimización
const debounce = (func, wait = 50) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
};
// Configurar cada tooltip
tooltips.forEach(container => {
const tooltip = container.querySelector('.tooltip');
const trigger = container.querySelector('.tooltip-trigger');
let hoverTimeout;
let isMouseIn = false;
// Calcular mejor posición
const calculatePosition = () => {
const rect = trigger.getBoundingClientRect();
const viewportHeight = window.innerHeight;
return (rect.top < viewportHeight / 2) ? 'bottom' : 'top';
};
// Actualizar posición (optimizado)
const updatePosition = debounce(() => {
tooltip.dataset.position = calculatePosition();
});
// Mostrar tooltip
const showTooltip = () => {
clearTimeout(hoverTimeout);
tooltip.style.visibility = 'visible';
tooltip.style.opacity = '1';
trigger.setAttribute('aria-expanded', 'true');
};
// Ocultar con retraso (para enlaces)
const hideTooltip = () => {
if (!isMouseIn) {
hoverTimeout = setTimeout(() => {
tooltip.style.visibility = 'hidden';
tooltip.style.opacity = '0';
trigger.setAttribute('aria-expanded', 'false');
}, 200);
}
};
// Eventos
trigger.addEventListener('mouseenter', showTooltip);
trigger.addEventListener('mouseleave', hideTooltip);
trigger.addEventListener('focus', showTooltip);
trigger.addEventListener('blur', hideTooltip);
tooltip.addEventListener('mouseenter', () => {
isMouseIn = true;
clearTimeout(hoverTimeout);
});
tooltip.addEventListener('mouseleave', () => {
isMouseIn = false;
hideTooltip();
});
// Inicialización
updatePosition();
window.addEventListener('resize', updatePosition);
window.addEventListener('scroll', updatePosition, { passive: true });
});
// Cerrar al hacer clic fuera
document.addEventListener('click', (e) => {
if (!e.target.closest('.tooltip-container') && !e.target.closest('.tooltip a')) {
document.querySelectorAll('.tooltip').forEach(t => {
t.style.visibility = 'hidden';
t.style.opacity = '0';
});
}
});
});
