Reference HTML elements in a data-tippy attribute
Author: pontus-mpCreated Aug 21, 2024Updated Aug 21, 2024
Labels💎 enhancement
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.
Source: atomiks/tippyjs