{"id":4027,"date":"2024-09-02T14:04:13","date_gmt":"2024-09-02T14:04:13","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4027"},"modified":"2026-01-20T14:49:45","modified_gmt":"2026-01-20T14:49:45","slug":"was-ist-ein-website-tooltip","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/de\/antworten\/was-ist-ein-website-tooltip\/","title":{"rendered":"Was ist ein Website-Tooltip?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Inhaltsverzeichnis<\/h2><nav><ul><li><a href=\"#why-should-you-use-tooltips\">Warum sollten Sie Tooltips verwenden?<\/a><\/li><li><a href=\"#how-do-tooltips-work\">Wie funktionieren Tooltips?<\/a><\/li><li><a href=\"#where-should-tooltips-be-placed\">Wo sollten Tooltips platziert werden?<\/a><\/li><li><a href=\"#what-are-the-best-practices-for-designing-tooltips\">Was sind die Best Practices f\u00fcr die Gestaltung von Tooltips?<\/a><\/li><li><a href=\"#can-a-tooltip-be-a-button\">Kann ein Tooltip ein Button sein?<\/a><\/li><li><a href=\"#are-there-any-accessibility-considerations-for-tooltips\">Gibt es \u00dcberlegungen zur Barrierefreiheit f\u00fcr Website-Tooltips?<\/a><\/li><li><a href=\"#conclusion\">Fazit<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-should-you-use-tooltips\" style=\"font-size:32px\"><strong>Warum sollten Sie Tooltips verwenden?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Tooltips k\u00f6nnen die Benutzererfahrung auf Websites und in Anwendungen beeinflussen, indem sie kurze Beschreibungen komplizierter Funktionen liefern, relevante, aber h\u00e4ufig versteckte Optionen hervorheben und Navigationsschritte f\u00fcr verschiedene einzelne Benutzer optimieren.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nTiefer Einblick: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nWenn ein wichtiger Punkt besondere Aufmerksamkeit und Engagement des Benutzers erfordert, kann die Kommunikation \u00fcber Tooltips erfolgen, anstatt alles im Detail zu erkl\u00e4ren.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-tooltips-work\" style=\"font-size:32px\"><strong>Wie funktionieren Tooltips?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Meistens aktiviert man einen Tooltip, indem man mit der Maus \u00fcber ein Element f\u00e4hrt. Auf einem Touchscreen tippt man stattdessen darauf. Wenn Sie mit der Maus \u00fcber ein Element fahren, zeigt ein Tooltip ein Feld mit den Informationen an, und wenn Sie die Maus wegbewegen, verschwindet der Tooltip.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nProfi-Tipp:  \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nAbh\u00e4ngig von den bewussten Aktionen des Benutzers w\u00e4hrend der Navigation ist eine kurze Verz\u00f6gerung bei der Anzeige des Tooltips von Vorteil.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-should-tooltips-be-placed\" style=\"font-size:32px\"><strong>Wo sollten Tooltips platziert werden?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Die Position des Tooltips sollte leicht erkennbar sein, ohne andere Seitenelemente zu verdecken; er erscheint typischerweise \u00fcber, unter oder seitlich des Elements, \u00fcber dem sich der Mauszeiger befindet.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nTiefer Einblick:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nVerlassen Sie sich nicht nur auf eine oder mehrere vorgegebene Tooltip-Positionen \u2013 es ist ratsam, diese Variationen der Tooltip-Positionen zu testen.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-best-practices-for-designing-tooltips\" style=\"font-size:32px\"><strong>Was sind die Best Practices f\u00fcr die Gestaltung von Tooltips?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Die besten Vorgehensweisen beim Design von Tooltips decken in der Regel die folgenden Themen ab:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Halten Sie Ihre Antworten pr\u00e4gnant:<\/strong> Vermeiden Sie eine \u00fcberm\u00e4\u00dfige L\u00e4nge.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Verwenden Sie eine einfache Sprache:<\/strong> Vermeiden Sie Fachjargon oder \u00fcberm\u00e4\u00dfig technische Begriffe.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Machen Sie es relevant f\u00fcr Ihren Benutzer:<\/strong> Richten Sie die Nachricht an der Schaltfl\u00e4che aus, \u00fcber die der Benutzer den Mauszeiger bewegt.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Universelle Benutzerfreundlichkeit: <\/strong>Stellen Sie sicher, dass Ihre Tooltips f\u00fcr Menschen mit Behinderungen zug\u00e4nglich sind.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Lesbarkeit:<\/strong> Gestalten Sie den Tooltip mit einem klaren Hintergrund und einem guten Textkontrast, um eine leichte Lesbarkeit zu gew\u00e4hrleisten.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nProfi-Tipp: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nAchten Sie darauf, f\u00fcr alle Tooltips auf Ihrer Website oder App den gleichen Stil zu verwenden, damit sie einheitlich aussehen.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-a-tooltip-be-a-button\" style=\"font-size:32px\"><strong>Kann ein Tooltip ein Button sein?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Manchmal! In der Standardanwendung dienen Tooltips nur zu Informationszwecken, obwohl sie auch Links oder Schaltfl\u00e4chen enthalten k\u00f6nnen. Dies erm\u00f6glicht es, Aktionen innerhalb des Tooltips auszuf\u00fchren, aber lassen Sie sich auch nicht von den Schaltfl\u00e4chen mitrei\u00dfen \u2013 zu viele davon k\u00f6nnen \u00fcberw\u00e4ltigend sein.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nTiefer Einblick: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nInteraktive Tooltips sollten nur dann verwendet werden, wenn wichtige Aufgaben zu erledigen sind oder der Platz begrenzt ist.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-there-any-accessibility-considerations-for-tooltips\" style=\"font-size:32px\"><strong>Gibt es irgendwelche \u00dcberlegungen zur Barrierefreiheit f\u00fcr Tooltips?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Ja! Tooltips entsprechen den Grunds\u00e4tzen der Barrierefreiheit im Web. Wenn Sie planen, sie zu erstellen, sollten Sie die folgenden wichtigen Punkte beachten:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Tastaturbedienbarkeit:<\/strong> Tooltips sollten per Tastatureingabe aktiviert, navigiert und geschlossen werden k\u00f6nnen, um die Zug\u00e4nglichkeit f\u00fcr Benutzer mit eingeschr\u00e4nkter Mausfunktionalit\u00e4t zu gew\u00e4hrleisten.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Optimieren f\u00fcr Bildschirmleseger\u00e4te:<\/strong> Es wird empfohlen, dass der Inhalt von Tooltips von einem Bildschirmleseger\u00e4t vorgelesen werden kann und f\u00fcr sehbehinderte Benutzer verst\u00e4ndlich ist. Dies erfordert in der Regel die Verwendung mehrerer ARIA-Attribute und\/oder Labels.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Kontrast:<\/strong> Der Text auf dem Tooltip und der Hintergrund m\u00fcssen ausreichend Farbkontrast f\u00fcr Menschen mit Sehbehinderung aufweisen, damit diese den Inhalt bequem lesen k\u00f6nnen.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Fokusverwaltung:<\/strong> Sobald ein Tooltip aktiviert wird, muss es m\u00f6glich sein, den Fokus auf diesen Tooltip zu legen, damit Benutzer, die eine Tastatur verwenden, dessen Inhalt durchsuchen k\u00f6nnen, der interaktive Funktionen enthalten kann.<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Denken Sie daran: Design ist effektiver, wenn es die Bed\u00fcrfnisse aller Benutzer ber\u00fccksichtigt, einschlie\u00dflich derer mit Behinderungen. Ebenso wichtig ist es zu beachten, dass der Zugriff auf Informationen, die \u00fcber Tooltips bereitgestellt werden, f\u00fcr alle zug\u00e4nglich sein sollte, unabh\u00e4ngig von den F\u00e4higkeiten des Einzelnen.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Fazit<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Tooltips sind zus\u00e4tzliche Informationen, die den Benutzern helfen, den Zweck besser zu verstehen und zu definieren. Design, Position und Reichweite der Tooltips m\u00fcssen angemessen sein. Die Einbindung effektiver Tooltips kann die Interaktion und Navigation des Benutzers in einem digitalen Produkt verbessern.<\/p>","protected":false},"excerpt":{"rendered":"<p>Warum sollten Sie Tooltips verwenden? Tooltips k\u00f6nnen die Benutzererfahrung auf Websites und in Anwendungen beeinflussen, indem sie kurze Beschreibungen komplexer Funktionalit\u00e4ten bereitstellen, relevante, aber oft versteckte Optionen hervorheben und Navigationsschritte f\u00fcr unterschiedliche individuelle Benutzer optimieren. Vertiefung: Immer wenn es einen wichtigen Punkt gibt, der besondere Aufmerksamkeit und Engagement vom Benutzer erfordert, anstatt zu erkl\u00e4ren [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4045,"template":"","answers_category":[28],"class_list":["post-4027","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7817,"card_image":4045,"content":[{"acf_fc_layout":"header_section","title":"Was ist ein Tooltip?","descriptions":"A tooltip is a concise message that contains relevant details to the users, usually displayed in a small window only when the cursor is placed over certain elements on the website or application and aims to enhance usability.\r\n\r\nIt works by supplementing the existing information on the screen while avoiding crowding the screen, which can happen if many little messages are left for the users.","tip_label":"Deep Dive","tip":"Picture tooltips as soft voices that quietly provide context and direction without pausing the active task of the user.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Tooltips provide users with relevant info in a concise format when they hover over or click on it","body":""},{"label":"Ensure appropriate measures are observed while designing any attached tooltips by making them visible and positioning them in relative proximity","body":""},{"label":"Tooltips give navigation further support by giving additional details and explanations but should not be the only method of navigating","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/answer\/4027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/media\/4045"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/media?parent=4027"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/de\/wp-json\/wp\/v2\/answers_category?post=4027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}