Full featured tooltip inside Webflow

Introduction

The Wambay <span class="tooltip" data-tooltip-wambay="tooltip">Tooltip</span> is a comprehensive solution developed by Johan to address the limitations found in existing tooltip solutions for Webflow. This tooltip stands out with the following features:

• Automatically selects the correct orientation for opening without hard coding.
• Supports various content types including links, images, and more.
• Can be attached to diverse elements such as blocks, images, text, and inline text.
• Remains visible when hovered to enable interaction with links inside it.
• Functions seamlessly within blogs and other collection pages.

‍

Research

Before developing this solution, a thorough examination of existing alternatives was conducted. These were categorized into two groups: native Webflow solutions and third-party libraries. The limitations of each are outlined below:

Native Webflow

Native Webflow solutions typically use dropdowns or custom interactions to show and hide tooltips. These methods have significant drawbacks:

• They require hard-coded tooltip directions, limiting their adaptability to different screen sizes, especially on mobile devices where tooltips might clip outside the screen.
• They restrict where tooltips can be attached, making it impossible to wrap a word within a sentence inside a dropdown without custom code, thus limiting tooltips to buttons and divs.

Third-Party Libraries

Third-party libraries often provide only basic tooltip functionality, which includes:

• Simple tooltip creation without extensive customization options.
• Limited support for rich text or complex custom tooltips.
• Dependency on typing content in one line within data attributes, reducing flexibility.

Getting Started

Follow these steps to implement the Wambay Tooltip:

1. Clone the Project: Start by cloning the project repository.
2. Explore the Setup: Familiarize yourself with how the tooltip system is wired up.
3. Extract What You Need: Determine if you need the entire system or just specific components for simple rich text tooltips.

Components

For simple rich text tooltips, you need only two components:

• tooltips on: Activates the tooltip feature for the page.
• tooltip: Has two properties, id and rich-text.

To display a tooltip, add the attribute data-tooltip-wambay="id" to the desired element.

Working Inside Collections

To use the tooltip within collections:

1. Clone the project and review the blog post example.
2. Create a multi-reference collection for tooltips.
3. Add the tooltip component inside a collection list.
4. Use Finsweet's rich text addon to enable DOM element generation.

‍

For assistance, reach out to Johan at johan@wambay.com.