Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
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 Box
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 to hide and show a tooltip.

Open in FramerPreview Example

Learn more about tooltips

Tooltips are text labels or text boxes with a title attribute that appear when a user hovers, focuses on, or clicks an element. The purpose of the tooltip is to give users more information about what a feature is or how to use it in your app or website.

Tooltips do not have HTML inputs but typically just have HTML elements such as text, buttons and or images. They are a great way to provide information to users, while still keeping your designs clean, as they only appear when a user needs to information.

How to create a tooltip on hover in Framer

To create this 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.

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

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement