Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Tooltip on Hover

Open in Framer to interactPreview this example

Learn to use the Switch package create a tooltip on hover interaction.

Open in FramerPreview Example

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!

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement