Tooltip

(c) Wikimedia Foundation, CC BY-SA 3.0

Ein Tooltip, laut Duden Tooltipp,^[1] ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten. Es zeigt eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche.

Alternative Namen sind unter Windows Quickinfo (‚schnelle Info‘, ‚Schnellinfo‘) sowie allgemein Mouseover oder Mouse-over,^[2] da der Tooltip erscheint, wenn der Mauszeiger eine kurze Zeit unbewegt über dem entsprechenden Element verweilt (hover, ‚schwebt‘; deutsche Bedeutung in etwa ‚Mausschwebetext‘).

Tooltips haben ihren Ursprung in der Balloon Help und werden häufig zur Erklärung von Schaltflächen in der Symbolleiste verwendet, in Webbrowsern auch zur Kurzbeschreibung eines Fotos oder Linkziels. Meist erscheinen wenige Worte in kleiner, farbig unterlegter Schrift. Es kann jedoch auch ein größeres Element erscheinen, das auch Schaltflächen oder Links beinhaltet.^[3]

Tooltips können ergänzende Informationen zu dem zugehörigen Element enthalten, die ansonsten nicht sichtbar sind, beispielsweise genaue (absolute) Zeitstempel von relativen Zeitangaben wie „vor 3 Monaten“, und Bedeutungen von Abkürzungen; sie können aber auch den Text zeigen, den das Element selbst auch enthält. Das ist sinnvoll beispielsweise bei einer Tabellenzelle, die mehr Text enthält als in dem zur Verfügung stehenden Platz angezeigt werden kann.

Tooltips in Webbrowsern

In der textbasierten Auszeichnungssprache HTML gibt es verschiedene Möglichkeiten, um Tooltips zu verwenden, zum Beispiel durch das title-Attribut, das Meta-Informationen zum Element angibt.^[4] Das Aussehen des Tooltips wird hierbei vom Browser bestimmt und kann sich dadurch von Browser zu Browser stark unterscheiden.

Cascading Style Sheets (CSS) und Skriptsprachen (z. B. JavaScript) geben Webentwicklern die Möglichkeit, komplexe Tooltip-Fenster zu gestalten. Allerdings kann dadurch die Barrierefreiheit beeinträchtigt werden.

Ähnlich wie bei der nativen Implementierung erscheinen diese Popup-Fenster nur dann, wenn die Maus für kurze Zeit über einem bestimmten Element (z. B. einem Hyperlink, Icon oder Formularelement) auf dem Bildschirm platziert wird, ohne zu klicken.

Neben reinem Text können derartige Popups beliebig formatiert werden und prinzipiell alle HTML-Elemente nutzen, darunter auch Formularelemente, Grafiken, Listen oder Tabellen. Zudem kann das Ein- und Ausblenden beliebig animiert werden.

Diverse Komponenten Frameworks (z. B. Bootstrap^[5] oder PrimeFaces^[6]) bieten Funktionen an, um freigestaltbare Tooltips auf möglichst einfache Art und Weise anzubieten. In der Regel wird dafür jQuery genutzt.

Neben dem weit verbreiteten Begriff Tooltip werden derartig aufbereitete Popup-Fenster gelegentlich auch als Hoverbox oder Hovercard bezeichnet. Sie werden typischerweise verwendet, um Seitenelemente auszublenden, die sonst eine Website unübersichtlich machen würden. Ebenso eignen sie sich dazu, den Benutzern eine Vorschau der Seite oder des Dokumentes, auf die ein Hyperlink verweist, anzuzeigen. Unter anderem nutzt auch Wikipedia diese Technik (siehe Hilfe:Seitenvorschaubilder).

Balloon Tip

Ein Balloon Tip (englisch für Sprechblasentipp, alternativ ebenfalls Quickinfo, auch Infosymbol) ist ein Element der Windows-Oberflächen seit Windows 2000, das vor allem im Benachrichtigungsfeld (Infobereich, „Systray“) eingeblendet wird und Statusmeldungen aktiver Prozesse enthält. Dieses Verhalten wird vom Registrierungs-Eintrag EnableBalloonTips gesteuert.^[7] Es kann aber auch wie ein normaler Tooltip zu einem Bedienelement eines Fensters angezeigt werden, um zusätzliche Informationen einzublenden oder auch um auf das Element hinzuweisen.

Kontextsensitive Hilfe

Unter Microsoft Windows können Dialogfenster in der Titelleiste eine ? Schaltfläche beinhalten. Klickt ein Benutzer diese Schaltfläche an, ändert sich der Mauszeiger in einen Pfeil mit Fragezeichen (). Klickt der Benutzer in diesem Modus wiederum ein Formularelement an, wird ein Tooltip-Fenster angezeigt, das eine kurze Erklärung beinhaltet, wozu das ausgewählte Formularelement dient oder was dessen Betätigung bewirkt.^[8][9]

Diese Funktion wird als kontextsensitive Hilfe oder Direkthilfe bezeichnet.

In den letzten Jahren hat diese Funktion zunehmend an Bedeutung verloren. In Softwareprodukten von Microsoft wurden diese Schaltflächen aus Dialogfenstern weitestgehend entfernt. In Softwareprodukten von Drittanbietern wird die Schaltfläche mit dem Fragezeichen-Symbol gelegentlich dazu verwendet, um eine Online-Dokumentation im Webbrowser zu öffnen.

Bereitstellung als Steuerelement

In diversen Programmiersprachen und Frameworks werden unsichtbare Komponenten angeboten, mit denen das Erscheinungsbild und das Verhalten von Tooltips innerhalb einer Anwendung gesteuert werden kann. Beispiele dafür sind die Komponenten System.Windows.Forms.ToolTip aus dem .NET Framework^[10] und Vcl.Controls.TBalloonHint aus Embarcadero Delphi^[11]. Zusätzlich existieren für diverse Programmiersprachen und Plattformen auch Komponenten von Drittanbietern.

Je nach Implementierung kann der Inhalt eines Tooltip-Fensters entweder das Standarddesign des Betriebssystems nutzen oder frei gestaltet werden. Die Funktion, den Inhalt frei gestalten zu können, nennt sich „Owner Draw“.^[12] In diesem Modus können beispielsweise auch Bilder, Tabellen oder beliebig formatierte Texte dargestellt werden.

Einzelnachweise

1. ↑ Tooltipp. In: Duden. Abgerufen am 28. Mai 2021. 
2. ↑ Mouseover. In: Duden. Abgerufen am 28. Mai 2021. 
3. ↑ Ringo Hapke: Grundsätze der Dialoggestaltung nach DIN EN 9241 10. (PDF; 428 kB) In: Oberseminar Softwareentwicklung. Hochschule für Technik, Wirtschaft und Kultur (FH), Leipzig, 28. April 2005, abgerufen am 26. Juli 2022. 
4. ↑ HTML/Universalattribute. In: SELFHTML-Wiki. Archiviert vom Original am 8. Oktober 2012; abgerufen am 26. Juli 2022 (Abschnitt: „Das title-Attribut“). 
5. ↑ Tooltips. In: Bootstrap Documentation. Abgerufen am 26. Juli 2022 (englisch). 
6. ↑ Tooltip. Tooltip Options. In: PrimeFaces Showcase 12.0.0. Abgerufen am 26. Juli 2022 (englisch). 
7. ↑ How do I disable balloon tips in the notification area in Windows XP or Vista? In: Microsoft Support. Microsoft, abgerufen am 26. Februar 2010 (englisch). 
8. ↑ Designing context-sensitive help. In: Microsoft (Hrsg.): Microsoft HTML Help Workshop 4.0. 3. Dezember 1999, <Windows Installationsordner>\Help\htmlhelp.chm::/dscxt.htm (englisch). 
9. ↑ Create context-sensitive help. In: Microsoft (Hrsg.): Microsoft HTML Help Workshop 4.0. 3. Dezember 1999, <Windows Installationsordner>\Help\htmlhelp.chm::/cxtover.htm (englisch). 
10. ↑ ToolTip Klasse. In: Microsoft Learn. Microsoft, abgerufen am 27. Juli 2022. 
11. ↑ Vcl.Controls.TBalloonHint. In: RAD Studio API Documentation. Embarcadero, 19. August 2014, abgerufen am 27. Juli 2022. 
12. ↑ Andy De George, Mia Sartschev: Steuerelemente mit integrierter Ownerdrawing-Unterstützung. In: Microsoft Learn. Microsoft, 27. September 2022, abgerufen am 20. Dezember 2022.