Tippyjs - How to pass data-value on clicked button to the template

Question

I have multiple buttons using the same tippy function that creates a dynamic template. I need to take the data-value="" from the clicked button and pass it to the tippyjs.

The button

<div class="d-none d-lg-flex show-context-menu" data-value="song450">

Tippy js

 tippy(".show-context-menu", {
 
  
  trigger: "click",
  placement: "bottom-start",
  allowHTML: true,
  interactive: true,
  hideOnClick: true,
  inertia: true,
  onShow(instance) {
    
    if ($("#parent-row-" + $(this).data("value")).length) {
      $("body").addClass("no-scroll");
      var e = $.parseJSON($("#parent-row-" + $(this).data("value")).html());
      console.log("#parent-row-" + $(this).data("value"));
    } else e = CurrentSongInfo,
   
    instance.setContent(` Dynamic template is here`);
  },
});

Right now I have the $(this) for getting the button. I have tried a number of ways but nothing is working to pass the data id

Answer 1

Try like this, hope it helps you.

$(".show-context-menu").each(function() {
  tippy($(this)[0], {
    content: $(this).attr("data-value"),
    trigger: "click",
    placement: "bottom-start",
    allowHTML: true,
    interactive: true,
    hideOnClick: true,
    inertia: true,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<div class="show-context-menu" data-value="song450">Button 1</div>
<div class="show-context-menu" data-value="song550">Button 2</div>
<div class="show-context-menu" data-value="song650">Button 3</div>