Für den Begriff Tooltip gibt es keine eindeutige Übersetzung ins Englische, er kann je nach Kontext als "Tooltip", "Help Balloon", "Pop-up-Beschreibung" oder sogar "Hilfetext" bezeichnet werden.
Ein Tooltip ist eine Popup-Meldung, die erscheint, wenn man mit einem Element interagiert, indem man darauf klickt oder mit der Maus darüber fährt. Diese Tooltips werden verwendet, um zusätzliche Informationen bereitzustellen, ohne dauerhaft Platz zu beanspruchen. Sie eignen sich ideal zur Erläuterung von Symbolen, Fachbegriffen oder Aktionen in Schnittstellen.
Sind Tooltips schädlich oder nützlich für SEO?
Nun, wie bei fast allem ist die Antwort immer: Es kommt darauf an. Während SEO-Puristen davor warnen, dass Google "versteckte" oder maskierte Inhalte nicht mag und deren Verwendung hart bestraft, wäre dies ein Extremfall für Fälle von Missbrauch , der Ihre Inhalte "kannibalisieren" könnte. Mit einer gewissen Ausgewogenheit und einem Minimum an Logik können Tooltips jedoch von Vorteil sein.
Vorteile der Verwendung von Tooltips
Im Großen und Ganzen können diese Meldungen, wenn sie freundlich und unaufdringlich sind, zur Verbesserung verschiedener Aspekte der Nutzererfahrung beitragen. Unter anderem verringern sie die Absprungrate und verbessern die Zugänglichkeit. Sie können auch die Möglichkeit bieten, zusätzliche Schlüsselwörter zu verwenden, die nicht von Natur aus in den Hauptinhalt passen, was der semantischen SEO zugute kommt.
Darüber hinaus können sie die Klickraten verbessern. Indem sie Tooltips in der Navigation oder Call-to-Action-Buttons anbieten, können sie die Nutzer besser leiten, was zu höheren Klickraten führt. Damit all dies möglich ist, müssen jedoch einige Mindestrichtlinien beachtet werden.
Empfehlungen für Aussehen, Inhalt und Betrieb
- Verwendung von HTML-Elementen und ARIA-Attributen, um sicherzustellen, dass Bildschirmlesegeräte und Suchmaschinen auf die darin enthaltenen Informationen zugreifen können.
- Ein Tooltip muss kurz sein. Natürlich wird niemand eine riesige Menge an Informationen in einem Pop-up lesen, und Sie werden einen großen Teil des Inhalts abdecken. Es sollte die minimalen, präzisen und notwendigen Informationen enthalten, und diese sollten für den Nutzer nicht entscheidend sein, wenn er eine Aktion ausführt oder abschließt.
- Der Inhalt sollte nicht redundant sein oder sich wiederholen. Stellen Sie sicher, dass Sie zusätzliche nützliche und notwendige Informationen bereitstellen und dass diese nicht in Ihrem Inhalt wiederholt werden, um "doppelten Inhalt" zu vermeiden.
- Versuchen Sie, so weit wie möglich Tooltips zu vermeiden, die verschwinden, wenn Sie den Cursor bewegen, oder verwenden Sie sie nur in Nachrichten, die nicht viele Informationen und/oder Inhalte enthalten. Idealerweise sollten sie bei jedem Klick angezeigt werden und sich schließen, wenn Sie irgendwo auf dem Bildschirm erneut klicken.
- Achten Sie darauf, dass sie lesbar sind und die richtige Größe haben.
- Fügen Sie nicht zwanzig verschiedene Designs von Tooltip-Symbolen oder Tooltip-Links hinzu, das schafft nur Verwirrung. Ein festes und einheitliches Design wird Ihren Besuchern helfen, sie auf den ersten Blick zu erkennen.
- Übertreiben Sie es nicht, planen Sie Ihre Strategie gut und fügen Sie sie nur dort ein, wo Sie glauben, dass sie den Zugang zu relevanten und/oder notwendigen ergänzenden Informationen erleichtern.
Merkmale und Funktionalitäten des Codes
Dieses . png-Bild mit transparentem Hintergrund wurde für diesen Fall verwendet.
Hier können Sie testen, ob das Endergebnis funktioniert [tooltip text="Example tooltip used in jrmora.com" position="auto"].
Die URL des Bildes wird zwischen den einfachen Anführungszeichen in dieser Zeile eingefügt:
$default_image = 'URL-de-tu-imagen';Wenn Sie den Code ändern, um ein SVG-HTML-Symbol wie dieses zu verwenden, können Sie leichter mit Farbe, Hintergrund, Dicke usw. spielen.
Intelligente automatische Positionsanpassung zur Vermeidung von Bildschirmrändern. D.h. bei Annäherung an den oberen Rand wird der Tooltip unten angezeigt und vivecersa.
Innerhalb der QuickInfo können voll funktionsfähige Links mit anpassbaren Stilen hinzugefügt werden. Obwohl es nicht ratsam ist, Links hinzuzufügen, ist es möglich, dass Sie dies gelegentlich tun müssen. Falls ein Tooltip einen Link enthält, wird dieser mit einer Verzögerung von 200 ms automatisch ausgeblendet, um das Anklicken zu erleichtern.
Sichere HTML-Unterstützung. Unterstützt:
<strong>, <em>, <a>, <br>, <span>Position, feste und anpassungsfähige Attribute.
Atributos de posición disponibles: position="auto" (default), top, bottom, left, rightARIA-Attribute (aria-expanded, role="tooltip").
Reaktionsfähiges Design.
Mobil anpassbar (anklickbare Umschaltfunktion).
Zurücksetzen bei Größenänderung, Drehen oder Verschieben
Die wichtigsten CSS-Klassen:
.tooltip-container /* Contenedor principal */
.tooltip-trigger /* Botón/icono que activa el tooltip */
.tooltip /* Caja del mensaje emergente */
.tooltip-arrow /* Flecha indicadora */Hauptfunktionen des JS:
calculateBestPosition() // Determina si colocar el tooltip arriba, abajo, etc.
showTooltip() // Muestra el tooltip
hideTooltip() // Oculta el tooltip con retraso
Beispiele für Shortcodes:
[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>"]
Dieser Code ist derjenige, den ich für meine speziellen Bedürfnisse verwendet habe. Verstehen Sie ihn als Ausgangspunkt. Er ist sehr ausbaufähig. Sie können das CSS und das JS trennen (oder es sogar ohne Javascript betrachten) und es so anpassen, dass es auch auf Wörter im Inhalt angewendet werden kann, ohne das Symbol anzuzeigen.
Um es zu verwenden, fügen Sie es wie immer in die functions.php Ihrer Vorlage oder Ihres Child-Themes ein, wenn Sie die Änderungen beibehalten wollen, wenn Ihre Vorlage aktualisiert wird.
Code
/**
* 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');
