Using Tippy.js with Turbolinks

Tippy.js is a nice library to show popups. It may, however, not always be obvious how to use Tippy.js with Turbolinks (or any other library that modifies the DOM). The basic ingredient is somewhat hidden in the docs: deffered. But loading a HTML template requires a slight adaptation of what is presented in their documentation to make loading of these templates deferred.

From beginning to start. Add the library:

$ yarn add tippy.js

Add a CSS-class for your templates to be hidden by default:

.tippy-template-content {
  display: none;
}

And then add the following to your application.js (or equivalent in your setup):

import {delegate} from 'tippy.js';

delegate('html', {
  content(reference) {
    const id = reference.getAttribute('data-tippy-template');
    if (id) {
      const template = document.getElementById(id);
      return template.innerHTML;    
    }
  },
  allowHTML: true,   ...