Reference HTML elements in a data-tippy attribute

[pontus-mp]

Problem

Basic scenario, you are using the delegate plugin to automatically initialize a bunch of tippy.js tooltips:

delegate("body", {
  target: ".tippy",
});

This makes it really easy to add tons of tooltips, configurable almost entirely through HTML attributes:

<button class="tippy" data-tippy-trigger="click" data-tippy-content="This is a click-triggered tooltip!">Test/<button>

However, the following doesn't seem to be replicatable using the previous approach:

tippy(targets, {
  content: document.getElementById('hidden-tooltip-content-element'),
});

Solution

Add support for a new data-attribute that contains a selector:

<button class="tippy" data-tippy-content-selector="#hidden-tooltip-content-element">Test/<button>

This should not affect backward-compatibility, as long as people haven't been intruding on the data-tippy- namespace.