2

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.

Dan
  • 5,836
  • 22
  • 86
  • 140

1 Answers1

4

TippyJS has an onShown event which fires when the tooltip is fully shown, this is not the same as the onShow event you are using, which fires at the start of the tooltip animation.

Secondly, in your Codepen you are using version 0.3.0 of TippyJS, in my Codepen I am using the latest version 2.5.4. I can't say for sure that the onShown event existed in the library 2 major versions back.

Working Codepen

Gary Thomas
  • 2,291
  • 1
  • 9
  • 21
  • Thanks. The onShown event is what was required. I had to 'unbind' the event using the Tippy onHidden event too to prevent duplicate bindings, but other than that it seems to work nicely, thank you :) – Dan Aug 23 '18 at 16:22
  • 1
    Ah yes, I understand, I've also updated my Codepen with the same fix. Thanks! – Gary Thomas Aug 23 '18 at 16:24