Advice on using tippy.js

I think I worked it out.

1. I copied these lines from the webforms module to my theme's .libraries.yml file - I don't think you need the license, version and cdn stuff but I left it in:

libraries.popperjs:
  remote: https://github.com/floating-ui/floating-ui
  version: '2.11.6'
  license:
    name: MIT
    url: https://github.com/floating-ui/floating-ui/blob/v2.x/LICENSE.md
    gpl-compatible: true
  directory: popperjs
  cdn:
    /libraries/popperjs/dist/umd/: https://unpkg.com/@popperjs/core@2.11.6/dist/umd/
  js:
    /libraries/popperjs/dist/umd/popper.js: {  weight: -20  }

libraries.tippyjs:
  remote: https://github.com/atomiks/tippyjs
  version: '6.3.7'
  license:
    name: MIT
    url: https://github.com/atomiks/tippyjs/blob/master/LICENSE
    gpl-compatible: true
  directory: tippyjs
  cdn:
    /libraries/tippyjs/dist/: https://unpkg.com/tippy.js@6.3.7/dist/
  css:
    component:
      /libraries/tippyjs/dist/tippy.css: { weight: -20 }
  js:
    /libraries/tippyjs/dist/tippy.umd.js: {  weight: -20 }
  dependencies:
    - MY_THEME/libraries.popperjs

2. Then I overwrote the glossify-tooltip.html.twig template in my theme thus:

<abbr tabindex="0" {% if tip %}aria-describedby="{{ word|clean_id }}-definition"{% endif %} class="glossify-tooltip-tip despace-parent glossary-word" data-glossary-id="{{ word|clean_id }}">{{ word }}</abbr>
<span id="{{ word|clean_id }}-definition" class="glossary-definition" style="display: none;">
  <dfn><a href="{{ tipurl }}">{{ word }}</a>: </dfn>
  <span>{{ tip }}</span>
</span>

3. Then I added the following to the JS folder of my theme.

(function (Drupal) {
  'use strict';

  /**
   * Initialize tooltip element support.
   *
   * @type {Drupal~behavior}
   */
  // Check if Drupal and Drupal.behaviors are defined
  if (typeof Drupal !== 'undefined' && typeof Drupal.behaviors !== 'undefined') {
    Drupal.behaviors.glossifyTippyTooltip = {
      attach: function (context, settings) {
        // Initialize Tippy.js
        tippy('.glossary-word', {
          content: function (reference) {
            var id = reference.getAttribute('data-glossary-id');
            return document.getElementById(id + '-definition').innerHTML;
          },    
      allowHTML: true,
      interactive: true,
      trigger: 'focus click'
        });
      }
    };
  }
})(Drupal, tippy);

document.querySelectorAll('.glossary-word').forEach(function (word) {
  var tooltip = document.getElementById(word.getAttribute('data-glossary-id' + '-definition'));
  // Initialize Tippy.js
  tippy(word, {
    content: tooltip.innerHTML,
    allowHTML: true,
    interactive: true,
    trigger: 'focus click'
  });
});

4. Added my new JS as a library

glossify-tippy:
  js:
    js/glossify-tippy.js: { weight: -10 }
  dependencies:
    - MY_THEME/libraries.tippyjs

5. Added all three libraries to my theme's .info.yml file

libraries:
  - MY_THEME/libraries.popperjs
  - MY_THEME/libraries.tippyjs
  - MY_THEME/glossify-tippy

This would be fantastic as a submodule... just saying =)

Thanks for the suggestion/compliment!

I can look into doing that in the next couple of months - my current version is a mishmash of the code above and things that only make sense in my current project.