Ο όρος tooltip δεν έχει μοναδική μετάφραση στα αγγλικά, μπορεί να περιγραφεί ως "tooltip", "help balloon", "pop-up description" ή ακόμη και "help text" ανάλογα με το πλαίσιο στο οποίο χρησιμοποιείται.
Η συμβουλή εργαλείων είναι ένα αναδυόμενο μήνυμα που εμφανίζεται όταν αλληλεπιδράτε με ένα στοιχείο, είτε κάνοντας κλικ σε αυτό είτε αιωρώντας το ποντίκι. Αυτές οι συμβουλές εργαλείων χρησιμοποιούνται για την παροχή πρόσθετων πληροφοριών χωρίς να καταλαμβάνουν μόνιμο χώρο. Ιδανικά για την επεξήγηση εικονιδίων, τεχνικών όρων ή ενεργειών σε διεπαφές.
Οι tooltips βλάπτουν ή ωφελούν το SEO;
Λοιπόν, όπως για σχεδόν τα πάντα, η απάντηση είναι πάντα ότι εξαρτάται. Ενώ οι πουριτανοί του SEO προειδοποιούν ότι η Google δεν συμπαθεί το "κρυφό" ή καλυμμένο περιεχόμενο και τιμωρεί αυστηρά τη χρήση του, αυτό θα ήταν ακραίο για περιπτώσεις κατάχρησης που θα μπορούσαν να "κανιβαλίσουν" το περιεχόμενό σας. Ωστόσο, τα tooltips, τα οποία χρησιμοποιούνται με μια ορισμένη ισορροπία και με ελάχιστη λογική, μπορούν να είναι ευεργετικά.
Πλεονεκτήματα της χρήσης tooltips
Σε γενικές γραμμές, τα μηνύματα αυτά, αν είναι φιλικά και διακριτικά, μπορούν να συμβάλουν στη βελτίωση διαφόρων πτυχών της εμπειρίας του χρήστη. Μεταξύ άλλων, μειώνουν τα ποσοστά αναπήδησης και βελτιώνουν την προσβασιμότητα. Μπορούν επίσης να παρέχουν ευκαιρίες για τη χρήση πρόσθετων λέξεων-κλειδιών που δεν εντάσσονται φυσικά στο κύριο περιεχόμενο, γεγονός που βοηθά στο σημασιολογικό SEO.
Επιπλέον, μπορούν να βελτιώσουν τα ποσοστά κλικ. Προσφέροντας tooltips στην πλοήγηση ή στα κουμπιά κλήσης προς δράση, μπορούν να καθοδηγήσουν τους χρήστες πιο αποτελεσματικά, οδηγώντας σε υψηλότερα ποσοστά κλικ. Αλλά για να είναι όλα αυτά δυνατά, πρέπει να τηρούνται μερικές ελάχιστες κατευθυντήριες γραμμές.
Συστάσεις για την εμφάνιση, το περιεχόμενο και τη λειτουργία
- Χρήση στοιχείων HTML και χαρακτηριστικών ARIA για να διασφαλιστεί ότι οι αναγνώστες οθόνης και οι μηχανές αναζήτησης μπορούν να έχουν πρόσβαση στις πληροφορίες που περιέχουν.
- Η συμβουλή εργαλείων πρέπει να είναι σύντομη. Προφανώς, κανείς δεν πρόκειται να διαβάσει έναν τεράστιο όγκο πληροφοριών σε ένα αναδυόμενο παράθυρο και θα καλύψετε ένα μεγάλο μέρος του περιεχομένου. Θα πρέπει να περιέχει τις ελάχιστες, ακριβείς και απαραίτητες πληροφορίες και αυτές δεν θα πρέπει να είναι κρίσιμες για τον χρήστη κατά την εκτέλεση ή την ολοκλήρωση μιας ενέργειας.
- Το περιεχόμενο δεν πρέπει να είναι περιττό ή επαναλαμβανόμενο, βεβαιωθείτε ότι παρέχετε πρόσθετες χρήσιμες και απαραίτητες πληροφορίες και ότι δεν επαναλαμβάνονται στο περιεχόμενό σας για να αποφύγετε το "διπλότυπο περιεχόμενο".
- Προσπαθήστε να αποφεύγετε όσο το δυνατόν περισσότερο τα tooltips που εξαφανίζονται όταν μετακινείτε τον κέρσορα ή χρησιμοποιήστε τα μόνο σε μηνύματα που δεν περιέχουν πολλές πληροφορίες ή/και περιεχόμενο. Ιδανικά, θα πρέπει να εμφανίζονται ανά κλικ και να κλείνουν όταν κάνετε ξανά κλικ οπουδήποτε στην οθόνη.
- Βεβαιωθείτε ότι είναι ευανάγνωστα και έχουν το σωστό μέγεθος.
- Μην προσθέτετε είκοσι διαφορετικά σχέδια εικονιδίων tooltip ή συνδέσμων tooltip, αυτό δημιουργεί μόνο σύγχυση. Ένας σταθερός και συνεπής σχεδιασμός θα βοηθήσει τους επισκέπτες σας να τα αναγνωρίσουν με την πρώτη ματιά.
- Μην το παρακάνετε, σχεδιάστε καλά τη στρατηγική σας για να τα προσθέσετε μόνο εκεί όπου πιστεύετε ότι διευκολύνουν την πρόσβαση σε σχετικές ή/και απαραίτητες συμπληρωματικές πληροφορίες.
Χαρακτηριστικά και λειτουργίες του κώδικα
Αυτή η εικόνα.png με διαφανές φόντο χρησιμοποιήθηκε για αυτή την περίπτωση.
Εδώ μπορείτε να δοκιμάσετε το τελικό αποτέλεσμα [tooltip text="Παράδειγμα tooltip που χρησιμοποιείται στο jrmora.com" position="auto"].
Η διεύθυνση URL της εικόνας προστίθεται μεταξύ των μονών εισαγωγικών σε αυτή τη γραμμή:
$default_image = 'URL-de-tu-imagen';Αν επιλέξετε να τροποποιήσετε τον κώδικα για να χρησιμοποιήσετε ένα εικονίδιο SVG HTML, όπως αυτό εδώ, θα μπορείτε να παίξετε με το χρώμα, το φόντο, το πάχος κ.λπ. πιο εύκολα.
Έξυπνη αυτόματη ρύθμιση θέσης για την αποφυγή των άκρων της οθόνης. Δηλαδή, όταν πλησιάζετε το πάνω άκρο, η συμβουλή εργαλείων εμφανίζεται στο κάτω μέρος και αντίστροφα.
Πλήρως λειτουργικοί σύνδεσμοι μπορούν να προστεθούν στο tooltip με προσαρμόσιμο στυλ. Αν και δεν συνιστάται η προσθήκη συνδέσμων, είναι πιθανό να χρειαστεί να το κάνετε περιστασιακά. Σε περίπτωση που ένα tooltip περιέχει έναν σύνδεσμο, υπάρχει μια καθυστέρηση 200ms στην αυτόματη απόκρυψη για να διευκολύνεται το κλικ.
Υποστήριξη ασφαλούς 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 ότι το κουμπί δεν είχε προσβάσιμο όνομα.
Responsive design.
Προσαρμογή σε κινητά (εναλλαγή με κλικ).
Επαναφορά κατά την αλλαγή μεγέθους, περιστροφή ή μετατόπιση
Κύριες κλάσεις CSS:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */Βασικές λειτουργίες του JS:
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.
- Lazy loading: Χαρακτηριστικά loading="lazy" και decoding="async" για την εικόνα.
- Φόρτωση υπό όρους: το JS φορτώνεται μόνο όταν χρησιμοποιείται ο σύντομος κωδικός.
- Debounce: Βελτιστοποίηση των συμβάντων αλλαγής μεγέθους και κύλισης.
- Βελτιστοποιημένη CSS: Χρήση της αλλαγής θέλησης και των σύγχρονων μονάδων (min()).
- Εκδόσεις με προσωρινή αποθήκευση: Χρησιμοποιήστε την filemtime() για να αποφύγετε την παρωχημένη προσωρινή αποθήκευση.
Αυτός ο κωδικός είναι αυτός που χρησιμοποίησα για τις συγκεκριμένες ανάγκες μου. Κατανοήστε τον ως σημείο εκκίνησης. Μπορεί να βελτιωθεί. Μπορείτε ακόμη και να τον εξετάσετε χωρίς τη χρήση Javascript και να τον προσαρμόσετε έτσι ώστε να μπορεί να εφαρμοστεί και σε λέξεις στο περιεχόμενο χωρίς να εμφανίζεται το εικονίδιο.
Για να το χρησιμοποιήσετε, όπως πάντα, απλά προσθέστε το στο functions.php και στους φακέλους assets/css/ και asstes/js/ του προτύπου σας ή του παιδικού σας θέματος, αν θέλετε να διατηρήσετε τις αλλαγές κατά την ενημέρωση του προτύπου σας.
Κωδικός
Αυτή είναι η δομή των αρχείων:
your-template/
├── functions.php (προσθέστε κώδικα PHP στο τέλος)
├── περιουσιακά στοιχεία/
│ ├─── 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';
});
}
});
});
