Support floating-ui / tippy.js by submodule

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.

@W01F & @jacobupal

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

Yes I think that would be the most robust and simple solution.
glossify_tippyjs or something like that. Is tippy the best choice or maybe popper or something else?

https://www.reddit.com/r/reactjs/comments/pi7cu5/popperjs_vs_tippyjs_whi...

The submodule could then also act as boilerplate for other tooltip libraries.

Happy to review MR's! :)

Hey @Anybody, in this instance TippyJS requires and extends PopperJS but you're right this might not be the best choice going forwards.

Both projects have since evolved into Floating UI which (at time of writing) seems to be actively maintained. Not only that but it seems that it is now part of Drupal Core as of version 10.3.0.

One day we'll be able to comfortably use HTML popover and eventually CSS Anchor Positioning and forget all about javascript libraries for such tasks!

Thanks @jacobupal for the update! That's looking fascinating

Some refs:

• "Floating UI is the evolution of Popper 2, designed to bring the project to a new level." (https://floating-ui.com/)
• https://github.com/ueberdosis/tiptap/discussions/2737
• https://github.com/ueberdosis/tiptap/discussions/4193

Why do you think floating UI is shipped with core? I couldn't find a change record saying that. Do you have any references for that?

So how to proceed?

@Anybody I was poking around this AM to investigate whether floating-ui is in core and I found this core issue ticket ✨ Replace dialog positioning with floating-ui Active . I also was looking in the Drupal API documentation and found the floating-ui library, but it's flagged as an internal library, so I'm not sure if there are potential complications from trying to load the library via core. It seems like the move to include it as a public library in core is very recent.

I'm going to try and see what happens if I include the library as a dependency via core. I've been trying to find alternate ways of pulling it in other than CDN since Drupal generally seems to discourage that method of pulling in 3rd party libraries.

It has been included so that it can be used in the new navigation module.

Even if its discouraged, CDN does at least work, and isn't so easily broken by changes in Core, so I wouldn't write it off just yet. But if you can successfully load it from Core and that works awesome! But maybe that's getting ahead of ourselves.

On how to proceed:

• Maybe a new branch with starter-twig and folders for this sub-module included, I'd maybe call it "JS Toggletips" or similar (is there any need to say which framework is being used in the naming?)
• For now could we make it a fourth option in the tooltip style selection? Does the main module make it easy for a submodule to add a fourth option
• Include Floating-UI in the submodule, via CDN or loading it via core, whichever works the soonest
• Then we get to making it!