Getting proper 'this' value in tippy.js

Question

When a tippy.js tooltip is triggered, I want to be able to get "this" from it.
I've tried:

tippy(".sampleID",{
    arrow:true,
    placement: "bottom",
  content(reference) {                            
    const title = reference.getAttribute('title'); 
    var tid=$(this).attr("id"); // is undefined
    return title;
  }
});

How do I get "this" for class .sampleID that was hovered on?

JSFiddle

What should `this` refer to? The tooltip? The element it's anchored to? Please post an MVCE example with what `this` is expected to refer to. — Jared Smith, Mar 20 '20 at 18:47
Ok, do you mean the HTML element that matches that selector? The one the tooltip is anchored to? Don't forget you can pass an element directly instead of a selector, and the content function would close over the reference. — Jared Smith, Mar 20 '20 at 18:51
Can't you not just use `reference` instead? It already contains your element. — Grabofus, Mar 20 '20 at 19:28

score 3 · Accepted Answer · answered Mar 20 '20 at 19:32

You can just use the reference provided as the argument, which refers to the current element matching .sampleID.

In your case I think you're trying to access the parent element though, which contains your id.

  tippy(".sampleID",{
    arrow:true,
    placement: "bottom",
    content(reference) {                              
      const title = reference.getAttribute('title');
      const tid = reference.parentElement.getAttribute('data-id');
      // jQuery: const tid = $(reference).parent().data('id');
      return title+"<br>"+tid;
    }
  });

Getting proper 'this' value in tippy.js

1 Answers1