#1178·tippyjs

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:

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

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

xml
<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:

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

Solution

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

xml
<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.