2

I'm using the jQuery plugin PowerTip to show tooltips on hover. I initialize it with $('.tooltip').powerTip() and this works great on already loaded content, but if I dynamically load <div class="tooltip" data-powertip="Hey">Hey</div>, I have to run the $('.tooltip').powerTip() function again, which seems like a waste, especially if I have hundreds of these. Is it possible to do something like this? :

1)

$(document).powerTip('.tooltip', {})

or

2)

$(document).on('mouseover', '.tooltip', function(e) {
    $(this).powerTip()
});
SeaBass
  • 1,584
  • 4
  • 20
  • 46

1 Answers1

0

The logic seems sound the only issue is you might need a callback function to trigger the popup because triggering the popup and initialising it happen at the same time (which could be problematic)

$('body').on('mouseenter','.tooltip', function(event) {
    $(event.target).powerTip();
    var delay = 250; //  1/4 of a second
    setTimeout(() => {
       $(event.target).tooltip('show')
    }, delay);
});
Michael Nelles
  • 5,426
  • 8
  • 41
  • 57
  • Thanks! Is delegate any different than on? I basically tried what you mentioned but with on and had the issue you described. How would a solution with a callback look? Thank you //edit. Just googled and found out that delegate is deprecated and replaced by on. – SeaBass Feb 10 '20 at 04:15
  • Yes I switched it to `.on` thank you. I added code with slight delay – Michael Nelles Feb 10 '20 at 04:22
  • I think you’ve switched places of .tooltip and mouseenter. That is what I tried that doesn’t work unfortunately. – SeaBass Feb 10 '20 at 04:25
  • Thanks, I’ll try it as soon as I can. – SeaBass Feb 10 '20 at 04:28
  • `.tooltip('show')` should be `.powerTip('show')` I assume. It seems like stuff is bubbling up and after a while I get `e is null` from the powerTip code. Not sure it will work unfortunately. – SeaBass Feb 10 '20 at 18:09