Tooltip

<h2 id="origin">Origin</h2>

<p>The term <i>tooltip</i> originally came from older Microsoft applications (e.g. <a href="/facts/Microsoft_Word/HPSu5W4j">Microsoft Word 95</a>). These applications would have <a href="/facts/Toolbar/s0DWMF3U">toolbars</a> 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.<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a>
</p>
<h2 id="examples">Examples</h2>
<p><a href="/facts/CSS/tA90XBQo">CSS</a>, <a href="/facts/HTML/sSc3fT78">HTML</a>, and <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> also other coding systems allow web designers to create customized tooltips.<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a>
</p><p>Demonstrations of tooltip usage are prevalent on web pages. Many graphical <a href="/facts/Web_browser/2pfyymLs">web browsers</a> display the title attribute of an <a href="/facts/Hypertext_Markup_Language/sSc3fT78">HTML</a> <a href="/facts/Html_element/s4TKzjUP">element</a> 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.<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a>
</p>
<h2 id="see-also">See also</h2>
<ul><li><a href="/facts/Mouseover/M9zuE0Bt">Mouseover</a></li>
<li><a href="/facts/Hoverbox/vWmqncx4">Hoverbox</a></li>
<li><a href="/facts/Infobox/tBA5LXD5">Infobox</a></li>
<li><a href="/facts/Dialog_box/VgWHgrE2">Dialog box</a></li>
<li><a href="/facts/Status_bar/cStYoD0g">Status bar</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>"Material Design". <a href="https://material.io/components/tooltips" target="_blank">https://material.io/components/tooltips</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>"Tooltip Definition". TechTerms.com. Retrieved 13 May 2014. <a href="http://www.techterms.com/definition/tooltip" target="_blank">http://www.techterms.com/definition/tooltip</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
<li id="fn:3"><p>"About Tooltip Controls - Windows applications". Microsoft Docs. 21 August 2020. <a href="https://docs.microsoft.com/en-us/windows/desktop/Controls/tooltip-controls" target="_blank">https://docs.microsoft.com/en-us/windows/desktop/Controls/tooltip-controls</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li>
<li id="fn:4"><p>"Material Design". <a href="https://material.io/components/tooltips" target="_blank">https://material.io/components/tooltips</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li>
<li id="fn:5"><p>"Show or hide ScreenTips." Microsoft Support. Retrieved 2020 December 13. <a href="https://support.microsoft.com/en-us/office/show-or-hide-screentips-72d92d6a-6d2a-40fd-9ac2-fb9413ffce18" target="_blank">https://support.microsoft.com/en-us/office/show-or-hide-screentips-72d92d6a-6d2a-40fd-9ac2-fb9413ffce18</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li>
<li id="fn:6"><p>"Help - User Interaction - macOS - Human Interface Guidelines - Apple Developer". developer.apple.com. Retrieved 2021-08-12. <a href="https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/help/" target="_blank">https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/help/</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li>
<li id="fn:7"><p>"Definition of balloon help | PCMag". <a href="https://www.pcmag.com/encyclopedia/term/balloon-help" target="_blank">https://www.pcmag.com/encyclopedia/term/balloon-help</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li>
<li id="fn:8"><p>"22 Tooltip Examples That Boost User Engagement". UserGuiding (in Spanish). Retrieved 2025-05-09. <a href="https://userguiding.com/es/blog/tooltips-ejemplos/" target="_blank">https://userguiding.com/es/blog/tooltips-ejemplos/</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li>
<li id="fn:9"><p>"Tooltip y Popover: Cómo y cuándo usarlos". UXABLES (in Spanish). Retrieved 2025-05-09. <a href="https://www.uxables.com/diseno-ux-ui/tooltip-y-popover-como-y-cuando-usarlos/" target="_blank">https://www.uxables.com/diseno-ux-ui/tooltip-y-popover-como-y-cuando-usarlos/</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li>
<li id="fn:10"><p>"ARIA: tooltip role - Accessibility | MDN". developer.mozilla.org. 2024-10-25. Retrieved 2025-02-19. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li>
<li id="fn:11"><p>"ARIA: tooltip role - Accessibility | MDN". developer.mozilla.org. 2024-10-25. Retrieved 2025-02-19. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role" target="_blank">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li>
</ol>

Tooltip open-in-new

Tooltip