Привязывать события к элементам внутри всплывающей подсказки HTML TippyJS

Question

Я использую TippyJS, чтобы показать подсказки HTML. У меня есть некоторый интерактивный контент внутри подсказки, поэтому я хотел бы связать события с этими элементами. Поскольку содержимое всплывающей подсказки генерируется Tippy динамически, стандартные привязки событий jQuery, похоже, не работают.

Я создал пример как это:

HTML:

<button id="t1" class="btn tippy" >hover here</button>

<div id="tip-content" style="display: none;">
    Trigger event when clicking this 
    <button class="btn btn-click">button</button>
</div>

JS:

new Tippy('#t1',{
  position:'top',
  interactive:'true',
  html: '#tip-content'
});

$('.btn-click').click(function(){
  console.log('clicked!');
});

Здесь есть рабочий CodePen.

Я хочу сделать console.log когда кнопка в содержании всплывающей подсказки нажата, но не может заставить ее работать. Я попытался связать событие нажатия кнопки внутри события 'show' Типпи, как это, но опять же это не работает:

onShow(instance) {
    $('.btn-click').click(function(){
      console.log('clicked!');
    });
  }

Кто-нибудь может посоветовать, как заставить это событие связываться с работой?

Большое спасибо.

Answer 1

TippyJS имеет onShown событие, которое срабатывает, когда всплывающая подсказка отображается полностью, это не то же самое, что onShow событие, которое вы используете, которое запускается в начале анимации всплывающей подсказки.

Во-вторых, в вашем Codepen вы используете версию 0.3.0 TippyJS, в моем Codepen я использую последнюю версию 2.5.4. Я не могу точно сказать, что onShown Событие существовало в библиотеке 2 основных версии назад.

Рабочий Codepen