Wambay Tooltip

This tooltip solution is built by Johan because all the solutions in Webflow he could find were lacking. The requirements for this tooltip, and for any competitor to beat it are the following:

  • Automatically detects orientation
  • Can contain anything you want
  • Can attach tooltip to anything, also inline
  • Can click inside tooltip to include links
  • Works inside collection pages like blogposts

Getting started

  1. Clone this project
  2. Have a look around how it's wired up
  3. Extract what you need

Just 3 steps

  1. Style your tooltip below and give it a [unique-ID]
  2. Add data-tooltip-wambay="[unique-ID]" somewhere you want to the tooltip to show
  3. Add the code in the website settings

Works inside collections + 2 extra steps

  1. Clone this project & have a look at the blogpost
  2. Make a multi ref collection for tooltips
  3. Add the tooltip component inside a collection list
  4. Use finsweet's richt text addon to enable dom-element generation

‍

Tutorial video ( this version is simplified so need to re-do the video )

Need help?

If you need assistance, reach out to johan@wambay.com

Visit us at wambay.com

Add and edit your tooltips here

Hide this section on the live website.
You can use anything Webflow has to offer, even rich text ( yes, create a component and re-use it )

1. Create some tooltips here

Make sure there ID is something descriptive, that is how we will link them.
Color the tippy-arrow if you don't want default black.

Johan van Wambeke
A Johan is a Webflow developer, they like to write code and are verry friendly.
Johan from Wambay

If something that you need is lacking, you do not have enough of it

Another tooltip we made for this inline word

Simple tooltip hovering over my head

2. Add this attribute on any element on the website

For example I will do it on this word.
And on that image

3. Add this code snippet in the site settings

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-richtext@1/richtext.js"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<script>
//there is a timeout because if you use finsweet to convert text to dom elements they might nog yet be converted. Because this is tooltip behaviour, the 100ms should not matter, nor be noticed.
setTimeout(() => {   
  tippy('[data-tooltip-wambay]', {
    content(reference) {
      const id = reference.getAttribute('data-tooltip-wambay');
      const template = document.getElementById(id);
      return template?.innerHTML || '';
    },
    allowHTML: true,
    interactive: true,
  });
  
  tippy('[data-tippy-content]',{
  	allowHtml: true,
    interactive: true
  });
}, 100);
</script>

I want to use them inside template pages

It's easiest to create a collection called "tooltips" and have just a rich-text-field.
Because that field can contain so much already, including images and links.

In this project there are only these tooltips inside the collection.
You can add many many more, much more complex ones.
Notice the ID on these is linked to the name propery, for it to be unique.

This gives more information about what a blogpost is

This is a tooltip about dogs

I do not want to slow down my site

Imagine you have more then 30 tooltips with images inside, ... you don't want to load those on every template page.
In this case, we will filter them per page. On your blog, or other collection, add a reference field to the tooltips.

When you have this field you can manually add specific tooltips to that collection-item.

How do I add a data-attribute in a template?

You need to write some basic HTML inside the rich-text. This HTML will be picked up and processed when the page loads. Se the example in the following Rich-text-field ( you can only see it in designer ).
Example in actual blogpost

I have a body inside this <span class="tooltip-code" data-tooltip-wambay="blogpost">blogpost</span>, but no tooltips yet