Tooltip on Hover

Learn more about tooltips

What is a tooltip?

Variously also known as a hint, a help balloon, an infotip, or a screentip–a tooltip is a message (i.e. text label or text box) that appears when a user’s cursor hovers over, focuses on, or clicks an element within a graphical user interface. The purpose of tooltips is to provide users with more information about what individual features of your app or website are for, and/or how to use them.

Think of a tooltip as a little speech bubble that helps users to better navigate or orientate themselves within the UI. For example, positioning the cursor over a title, hotlink, or image might reveal a text explaining in greater depth precisely what the user is looking at and what would be the outcome of clicking on the element in question.

You can attach a tooltip to virtually any element on your user interface; most programming language will allow you to style your tooltips to match the visual elements of the rest of your UI.

Hover tooltips and HTML

Tooltips do not have HTML inputs but typically just have tooltip HTML elements such as text, buttons and or images. (The same goes for CSS tooltip hovers or Javascript tooltip on hover.)

You can create tooltips by placing the tooltip text inside an inline element (such as <span> tooltip)

Tooltips don’t need to be attached to obvious “tools” to be useful, though; even an “empty” box on a form can be a good candidate for a tooltip if it helps the user to better understand what kind of information they are expected to input there.

As tooltip icon is not visible on the page during normal use, but only appears when a user deliberately activates them. They are a great way of providing extra information while still keeping the overall design clean and minimal. Even for users that are already familiar with the general design and structure of a given application, tooltips can be highly valuable for explaining new features as they are implemented - without the need to provide lengthy instruction elsewhere. This way, all guidance remains in-app, and yet unnecessary clutter is avoided.

Hover tooltips

On desktop, input tooltips date back to at least the mid-nineties, when Microsoft Word famously introduced Clippy, a “speaking” paperclip icon to provide users with tips and advice about working with the software. After this, tooltips became standard in many applications. However, because tooltips had traditionally always been activated on hover, this method of providing users with information all but disappeared in the early days of mobile applications - due to the inability to hover on a touchscreen.

Today the phrase “tooltip on hover” is still in common usage. In practice, however, with the increasing prevalence of touchscreen devices, tooltip on hover is more likely to mean tooltip on touch and hold. Here a long press - as opposed to a tap - of a UI element will reveal the tooltip text box.

Nonetheless, whether it’s a hover or a hold, the principal remains the same. And tooltip on hover can be a great way of improving user experience without compromising design principles.

Do’s and don’ts of tooltip on hover

• Do use tooltips to explain interactive images. The print logo on your word processor should have a tooltip that, when you hover, explains that the printer logo means “PRINT,” and provides the keyboard shortcut you use to activate it. That’s a solid way to provide further context and information to a user.
• Don’t use tooltip on hover to repeat text on an image. If that same button says the word “PRINT”, there’s no need for a hoverable tooltip to re-explain the visible UI text.
• Do use tooltips to describe how similar-looking elements differ. Your word processor’s cut, copy, and paste images look fairly similar at first glance; hover text can help differentiate them for the user.
• Don’t use shadows or rich information on tooltips. Tooltips are typically too small to detect to the naked eye and uses up valuable processing power. The same goes for robust, detailed images and a lot of information. The principle of KISS (Keep It Simple, Stupid) applies here.
• Do keep your tooltip position within the window. Make sure your tooltip information doesn’t get cropped off the edge of the user screen.
• Don’t use tooltips to explain information your user absolutely needs to know. Because tooltips require extra interaction from the user, it’s not a good idea to make your user dependent on them to operate your tool in the first place. Use icons and more stylistic elements to explain the app to your user; tooltips should just provide extra context and assistance as needed.

How do you make a tooltip on hover in Framer?

To create a tooltip on hover interaction in Framer you will need to install the Switch package from the Insert Menu. The Switch package allows you to create state-based interactions, so you will be able to make things happen based on the state of an element in the preview window. You will need one screen made with the Frame tool and then you will need to design the button and the actual tooltip and an empty state, which will also start with frames.

The Switch package has two components, Switch and SwitchToStateAction. Place them both on your main screen and connect SwitchToStateAction to your button and connect Switch to the tooltip and the tooltip empty state. Now your tooltip on hover interaction is ready to go!