Tooltip: Difference between revisions
Fixed wording so it's shorter, easier to understand, and no longer contradictory. |
|||
| (139 intermediate revisions by more than 100 users not shown) | |||
| Line 1: | Line 1: | ||
{{short description|Graphical user interface element}} |
|||
| ⚫ | |||
{{Redirect|Tooltips|information on tooltips in Wikipedia|Wikipedia:Tooltip|selfref=yes}} |
|||
| ⚫ | |||
{{confused|Tipped tool}} |
|||
The '''tooltip''' is a common [[graphical user interface]] element. It is used in conjunction with a [[cursor (computers)|cursor]], usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. |
|||
{{more citations needed|date=December 2020}} |
|||
| ⚫ | |||
The '''tooltip''', also known as '''infotip''' or '''hint''', is a common [[graphical user interface]] (GUI) element in which, when [[hoverbox|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 --> |
|||
==Variants== |
|||
A common variant, especially in older software, is displaying a description of the tool in a [[status bar]], but such descriptions are not usually called tooltips. Another system, on old [[Mac OS]] versions, that aims to solve the same problem, but in a slightly different way, is [[balloon help]]. |
|||
[[Microsoft]] invented another term, “ScreenTip”, and uses it in its end-user documentation. |
|||
The tooltip is used for providing an interface between pointer and push button generally. |
|||
On desktop, it is used in conjunction with a [[cursor (user interface)|cursor]], usually a [[pointer (user interface)|pointer]], whereby the tooltip appears when a user [[mouseover|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> |
|||
| ⚫ | |||
Demonstrations of tooltip usage are prevalent on Web pages. Many graphical [[Web browser]]s display the <code>title</code> attribute of an [[HTML]] element as a tooltip when a user hovers the mouse cursor over that element; in such a browser you should be able to hover over Wikipedia images and hyperlinks and see a tooltip appear. Some browsers, notably Microsoft’s [[Internet Explorer]], will also display the <code>alt</code> attribute of an image as a tooltip in the same manner if an <code>alt</code> attribute is specified and a <code>title</code> attribute is not. If a <code>title</code> attribute is also specified, it will override the <code>alt</code> attribute for tooltip content. |
|||
[[File:Mobile_URL_tooltip.png|thumb|URL tooltip in ''Kiwi Browser'', a [[Chromium (web browser)|Chromium]] derivative, revealed with the stylus on a [[Samsung Galaxy Note 4]].]] |
|||
==Name== |
|||
On touch-screen devices, a tooltip is displayed upon long-pressing—i.e., tapping and holding—an element.<ref name=":0" /> Some smartphones have [[Smartphones#Alternative input methods|alternative input methods]] such as a [[stylus (computing)|stylus]], which can show tooltips when hovering above the screen. |
|||
| ⚫ | The term tooltip originally came from older Microsoft applications ( |
||
A common variant of tooltips, especially in older software, is displaying a description of the tool in a [[status bar]].{{Citation needed|date=December 2010}} [[Microsoft]]'s tooltips feature found in its [[End user|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 Inc.|Apple's]] tooltips feature found in its [[Developer (software)|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.{{Citation needed|date=December 2020}} |
|||
== Origin == |
|||
| ⚫ | |||
| ⚫ | The term ''tooltip'' originally came from older Microsoft applications (e.g. [[Microsoft Word|Microsoft Word 95]]). These applications would have [[toolbar]]s 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. |
||
| ⚫ | |||
{{Unreferenced section|date=December 2020}} |
|||
[[CSS]], [[HTML]], and [[JavaScript]] also other coding systems allow web designers to create customized tooltips. |
|||
Demonstrations of tooltip usage are prevalent on web pages. Many graphical [[web browser]]s display the <code>title</code> attribute of an [[Hypertext Markup Language|HTML]]<!-- Don't bypass the redirect, so that the text is congruent with the image --> [[html element|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. |
|||
==See also== |
==See also== |
||
| ⚫ | |||
*[[Mouseover]] |
*[[Mouseover]] |
||
*[[Hoverbox]] |
|||
<!-- To be enabled as soon as there are references |
|||
| ⚫ | |||
*[[Dialog box]] |
|||
*[[Status bar]] |
|||
==References== |
==References== |
||
<references /> |
<references /> |
||
--> |
|||
{{Graphical control elements}} |
|||
{{GUI widgets}} |
|||
[[Category:Graphical user interface]] |
[[Category:Graphical user interface elements]] |
||
[[Category:User interface techniques]] |
[[Category:User interface techniques]] |
||
[[Category:Widgets]] |
|||
[[ca:Indicador de funció]] |
|||
[[de:Tooltip]] |
|||
[[es:Tooltip]] |
|||
[[fr:Infobulle]] |
|||
[[ko:말풍선 (컴퓨터)]] |
|||
[[it:Tooltip]] |
|||
[[nl:Tooltip]] |
|||
[[ja:ツールチップ]] |
|||
[[pl:Tooltip]] |
|||
[[ru:Подсказка]] |
|||
[[sv:Tooltip]] |
|||
Latest revision as of 18:31, 24 October 2024
 | This article needs additional citations for verification. (December 2020) |
The tooltip, also known as infotip or hint, 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.[1] 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.
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.[2][3]
On touch-screen devices, a tooltip is displayed upon long-pressing—i.e., tapping and holding—an element.[1] 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.[citation needed] Microsoft's tooltips feature found in its end-user documentation is named ScreenTips.[4] Apple's tooltips feature found in its developer documentation is named help tags.[5] The Classic Mac OS uses a tooltips feature, though in a slightly different way, known as balloon help.[6] 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.[citation needed]
Origin
[edit] |
The term tooltip originally came from older Microsoft applications (e.g. Microsoft Word 95). 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.
Examples
[edit] |
CSS, HTML, and JavaScript also other coding systems allow web designers to create customized tooltips.
Demonstrations of tooltip usage are prevalent on web pages. Many graphical web browsers display the title attribute of an HTML 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.
See also
[edit]References
[edit]- ^ a b "Material Design".
- ^ "Tooltip Definition". TechTerms.com. Retrieved 13 May 2014.
- ^ "About Tooltip Controls - Windows applications". Microsoft Docs. 21 August 2020.
- ^ "Show or hide ScreenTips." Microsoft Support. Retrieved 2020 December 13.
- ^ "Help - User Interaction - macOS - Human Interface Guidelines - Apple Developer". developer.apple.com. Retrieved 2021-08-12.
- ^ "Definition of balloon help | PCMag".