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.

Tooltips do not have HTML inputs but typically just have HTML elements such as text, buttons and or images. 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 tooltips are not visible on the page during normal use, but only appear 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.

Tooltip on hover

On desktop, tooltips date back to at least the mid-nineties, when Microsoft Word famously introduced a “speaking” paperclip icon to provide users with tips and advice about working with the software. Following which, 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 principals.

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!