profile
viewpoint

Ask questionsTippy 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
});
atomiks/tippyjs

Answer questions skinnaj

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

useful!
source:https://uonfu.com/
answerer
Jannik skinnaj @stakingrewards Hamburg, Germany stakingrewards.com Co-Founder & CTO @StakingRewards . 👨‍💻 Coder by heart, ⚡️ Staking enthusiast, ☕️ Coffee nerd
Github User Rank List