atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.91k stars 518 forks source link

Reference HTML elements in a data-tippy attribute #1178

Open pontus-mp opened 3 weeks ago

pontus-mp commented 3 weeks ago

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.