I'm using TippyJS to show HTML tooltips. I have some interactive content inside the tooltip so I'd like to bind events to those elements. Because the tooltip content is generated dynamically by Tippy, standard jQuery event bindings don't seem to work.
I've set up an example like this:
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!');
});
There's a working CodePen here.
I want to do a console.log
when the button in the tooltip content is clicked, but can't get it to work. I've tried binding the button click event inside a Tippy 'show' event, like this, but again it doesn't work:
onShow(instance) {
$('.btn-click').click(function(){
console.log('clicked!');
});
}
Can anyone advise how to get this event binding to work?
Many thanks.