Sharing knowledge

Full featured tooltip inside Webflow

A custom tooltip solution that can do what you need it to do

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.