CODEWITHSUNDEEP
javascriptjqueryhtmltooltipster
Jonatan44
Jonatan44

Reputation: 13

onclick event inside tooltipster

I'm using tooltipster with HTML content and need to hook onclick of an element within the HTML content. my code looks like this:

    $('.groups-tooltip').tooltipster({            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: {
            mouseenter: true
        },
        triggerClose: {
            mouseleave: true
        },

        functionReady: function(instance, helper){   
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').on("click", function(){ 
                console.log("Clicked!");
            });  

            instance.content($('#tooltip-template').html());
        }      
    });

tooltip-template is just a div container for the tooltip-template-div and tooltip-template-span elemnts.

the

$(".tooltip-template-div").hide();

part is working well but the onclick hook does not seem to have any effect.

Thanks!

Upvotes: 1

Views: 1822

Answers (2)

Nikunj Bambhroliya
Nikunj Bambhroliya

Reputation: 81

You should bind click event before initialize tooltipster.

$(document).ready(function(){
    $('.tooltip-template-span').on('click', function() {
      alert("Clicked!");
    });

   $('.groups-tooltip').tooltipster({            
        contentCloning: true,
        trigger: 'custom',
        interactive: true,
        contentAsHTML: true,
        triggerOpen: {
            mouseenter: true
        },
        triggerClose: {
            mouseleave: true
        },

        functionReady: function(instance, helper){
            $(".tooltip-template-div").hide();
            $('.tooltip-template-span').click();
            instance.content($('#tooltip-template').html());
        }   
        }
   );
});

You can check from https://jsfiddle.net/8jmt0he6/

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

You are adding the event listener before inserting the html:

Try reversing the order

  functionReady: function(instance, helper){ 
       instance.content($('#tooltip-template').html());  
        $(".tooltip-template-div").hide();
        $('.tooltip-template-span').on("click", function(){ 
            console.log("Clicked!");
        });

    }

Upvotes: 3

Related Questions