A tooltip is a graphical user interface (GUI) element that appears when hovering over a screen element or component, displaying information about that element without needing to click on it. Tooltips are typically used in conjunction with a cursor or mouse pointer, appearing when a user hovers the pointer over an item without clicking it. On mobile operating systems, a tooltip is displayed upon long-pressing or tapping and holding an element. Tooltips are also known as infotips, hints, screentips, or hover help.
Tooltips can be used to provide additional guidance and prompts to users, making them highly contextual. They can display anything from the full name of the object the mouse is hovering on to displaying additional information or a detailed explanation of what that tool or object does. Tooltips are ideal for bits of text that can be hidden to save space on the page but are easily accessible when users need them. They can capture the users attention and point out elements they may have missed otherwise. However, users may find them overwhelming if there are too many tooltips at once, and they shouldn't replace intuitive design.
Tooltips can be created using HTML and CSS, and there are various open-source libraries available to lift some of the weight off your shoulders. To optimize a tooltip, it is important to user test the initial user experience so that the tooltip appears at the appropriate time and doesn't overwhelm the user.
