Useful or not, from you.
tippyjs Tippy with dynamic content that stays present in the DOM

I'm trying to create a Tippy instance with dynamically populated content generated by a Phoenix LiveView. The LiveView is basically a container which is dynamically updated by the backend (via WebSockets).

This means:

  1. The content needs to be present in the DOM at all times, both when Tippy is shown or hidden.
  2. The content has bindings and listeners so cloning or injecting HTML will not work afaik.

Is there a way to achieve this using Tippy?

Sample of my code:

Template

<button class="target">notifications</button>

<div class="dropdown" style="display: none;">
  <%= live_render(@conn, NotificationsLive, session: %{"user_id" => user_id}) %>
</div>

JavaScript

const target = document.querySelector(".target");
const dropdown = document.querySelector(".dropdown");

dropdown.style.display = "block";

tippy(target, {
  content: dropdown,
  interactive: true
});
That's a useful answer
Without any help

Hey @sn3p, did you find a way to keep the tooltip in the DOM?