Smart Tooltips is a professional, highly customizable component for Framer designed to enhance user experience by providing rich, context-aware information exactly when it's needed. Go beyond simple pop-ups with advanced triggers, smart positioning, and deep styling controls.
Interactive Triggers & Pinning: Choose between Click or Hover to reveal the tooltip. The unique hover mode allows users to reveal a tooltip on mouseover, and then click to "pin" it in place for further reading—a feature perfect for complex information.
Smart Positioning: The tooltip is designed to be intelligent. While you can set a preferred position (Bottom or Right), it will automatically reposition itself to Top or Left to avoid being cut off by the edges of the screen, ensuring a flawless user experience on any device.
Live Editor Preview: Style with confidence using the Preview toggle. This feature displays the tooltip directly on the Framer canvas, allowing you to perfect its appearance without constantly switching to presentation mode.
Deep Button Customization: The trigger button is fully customizable. Control the:
Icon: Use a custom SVG, a fallback icon, and set its Color, Hover Color, and Size.
Style: Adjust the Background Color, Hover Color, Rotation, and Border Radius.
Borders: Define unique border widths and colors for both the default and hover states.
Rich Tooltip Styling: Tailor the tooltip bubble to perfectly match your brand. Customize the Text content, Background and Text Color, Max Width, Border Radius, and apply a detailed Shadow with a native-like editor (Color, X, Y, Blur, Spread).
Full Font Control: Utilize Framer's extended font controls to manage the tooltip's typography down to the smallest detail, including font family, size, line height, and letter spacing.
Professional & Accessible: Built with the user in mind, the tooltip automatically closes on outside clicks or on scroll, and is fully keyboard-navigable for enhanced accessibility.
Lennart Ahlfeldt
