{{short description|Graphical user interface element}} {{distinguish|Tipped tool}} {{more citations needed|date=December 2020}}
[[File:HTML tooltip.png|thumb|400px|A web browser tooltip displayed for hyperlink to HTML, showing what the abbreviation stands for.]]
The '''tooltip''' (also known as '''infotip''', '''hint''', mouseover or '''hover text'''<ref>{{cite web |title=Understanding Success Criterion 1.4.13: Content on Hover or Focus |url=https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html |website=Web Content Accessibility Guidelines (WCAG) 2.2 |publisher=W3C (World Wide Web Consortium) |access-date=16 February 2026 |ref=WCAG-HoverFocus |date=17 September 2025}}</ref>) is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp over a relative time ("… ago"). In common practice, the tooltip is displayed continuously as long as the user hovers over the element or the text box provided by the tool.<ref name=":0">{{cite web |url=https://material.io/components/tooltips |title = Material Design}}</ref> It is sometimes possible for the mouse to hover within the text box provided to activate a nested tooltip, and this can continue to any depth, often with multiple text boxes overlapped.<!-- this is common on Wikipedia if you activate the right setting -->
On desktop, it is used in conjunction with a cursor, usually a pointer, whereby the tooltip appears when a user hovers the pointer over an item without clicking it.<ref>{{cite web|url=http://www.techterms.com/definition/tooltip|title=Tooltip Definition|publisher=TechTerms.com|access-date=13 May 2014}}</ref><ref>{{cite web|url=https://docs.microsoft.com/en-us/windows/desktop/Controls/tooltip-controls|title=About Tooltip Controls - Windows applications|website=Microsoft Docs|date=21 August 2020 }}</ref>
[[File:Mobile_URL_tooltip.png|thumb|URL tooltip in ''Kiwi Browser'', a Chromium derivative, revealed with the stylus on a Samsung Galaxy Note 4.]] On touch-screen devices, a tooltip is displayed upon long-pressing—i.e., tapping and holding—an element.<ref name=":0" /> Some smartphones have alternative input methods such as a stylus, which can show tooltips when hovering above the screen.
A common variant of tooltips, especially in older software, is displaying a description of the tool in a status bar.<ref>{{Cite web |last=jwmsft |title=Tooltips and Infotips - Win32 apps |url=https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-tooltips-and-infotips |access-date=2025-10-05 |website=learn.microsoft.com |language=en-us}}</ref> Microsoft's tooltips feature found in its end-user documentation is named '''ScreenTips'''.<ref>"[https://support.microsoft.com/en-us/office/show-or-hide-screentips-72d92d6a-6d2a-40fd-9ac2-fb9413ffce18 Show or hide ScreenTips]." ''Microsoft Support''. Retrieved 2020 December 13.</ref> Apple's tooltips feature found in its developer documentation is named '''help tags'''.<ref>{{Cite web|title=Help - User Interaction - macOS - Human Interface Guidelines - Apple Developer|url=https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/help/|access-date=2021-08-12|website=developer.apple.com}}</ref> The Classic Mac OS uses a tooltips feature, though in a slightly different way, known as balloon help.<ref>{{cite web |url=https://www.pcmag.com/encyclopedia/term/balloon-help |title = Definition of balloon help {{!}} PCMag}}</ref> Some software and applications, such as GIMP, provide an option for users to turn off some or all tooltips. However, such options are left to the discretion of the developer, and are often not implemented.<ref>{{cite web |title=22 Tooltip Examples That Boost User Engagement |url=https://userguiding.com/es/blog/tooltips-ejemplos/ |access-date=2025-05-09 |website=UserGuiding |language=es}}</ref>
== Origin == The term ''tooltip'' originally came from older Microsoft applications (e.g. Microsoft Word 95).<ref>{{Cite book |last=PROSISE |first=JEFF |url=https://books.google.com/books?id=elneMPYGaagC&q=%22One+of+the+new+controls+is+the+tooltip+control%22&pg=PA265 |title=PC Mag - Adding Tooltips to Your Win 95 Apps |date=1995-05-30 |publisher=Ziff Davis, Inc. |publication-date=1995-05-30 |pages=265 |language=en}}</ref><ref>{{Cite patent|number=US6828988B2|title=Interactive tooltip|gdate=2004-12-07|invent1=Hudson|invent2=Huynh|invent3=Lowry|invent4=III|inventor1-first=Margaret G.|inventor2-first=Tuan|inventor3-first=Kent R.|inventor4-first=Justin M. Maguire|url=https://patents.google.com/patent/US6828988B2/en}}</ref> These applications would have toolbars wherein, when moving the mouse over the Toolbar icons, displayed a short description of the function of the tool in the toolbar. More recently, these tooltips are used in various parts of an interface, not only on toolbars. The concept of tooltips as contextual help elements in user interfaces emerged with early graphical user interfaces to enhance usability.<ref>{{cite web |title=Tooltip y Popover: Cómo y cuándo usarlos |url=https://www.uxables.com/diseno-ux-ui/tooltip-y-popover-como-y-cuando-usarlos/ |access-date=2025-05-09 |website=UXABLES |date=17 July 2023 |language=es}}</ref>
== Examples == CSS, HTML, JavaScript, and other coding systems allow web designers to create customized tooltips.<ref name=":1">{{Cite web |date=2024-10-25 |title=ARIA: tooltip role - Accessibility {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role |access-date=2025-02-19 |website=developer.mozilla.org |language=en-US}}</ref>
Demonstrations of tooltip usage are prevalent on web pages. Many graphical web browsers display the <span style="font-family: "Consolas";><code>title</code> </span>attribute of an HTML<!-- Don't bypass the redirect, so that the text is congruent with the image --> element as a tooltip when a user hovers the pointer over that element; in such a browser, when hovering over Wikipedia images and hyperlinks a tooltip will appear.<ref name=":1" />
==See also== *Mouseover *Hoverbox *Infobox *Dialog box *Status bar
==References== <references />
{{Graphical control elements}}
Category:Graphical user interface elements Category:User interface techniques