Add and edit your tooltips here

This section is hidden 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

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.

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 ).