CODEWITHSUNDEEP
javascriptjqueryclickjquery-tooltiptooltipster
user3442544
user3442544

Reputation: 1

Tooltipster plugin not firing jquery function when button or any click even occur

I want to use Tooltipster plugin which click an element in the body to show the tooltip and I want to have a close button inside the tooltip to close it.

However I use Jquery click() function to handle it but it won't fired. I tried the solution in this post. It worked only when the tooltip is triggered by hover event.

Tooltipster plugin not firing jquery function when link in in the tooltip is clicked

The original solution using hover in jsfiddle

trigger: 'hover',

Instead using click to show the tooltip 

trigger: 'click',

http://jsfiddle.net/bCqyL/7/

It won't fire any click event in jquery block. It can captured by a normal javascript function only. I checked it should be some code in the Tooltipster plugin locked and captured all "click()" event inside the tips when in click trigger mode.

I tried other event like onchange event of radio button is fired when using the code in original solution

Upvotes: 0

Views: 6027

Answers (2)

zesda
zesda

Reputation: 418

@Evan is right. Your Tooltip doesn't exist in the DOM and you can't bind/delegate any action to it (even if you go all the way back to $(document) after DOMReady).

If you're after a close button inside of the Tooltip try the following code, it's worked for me (and JSFiddle!):

JavaScript

$('.tooltip').tooltipster({
    // Required, but have a fiddle around
    'interactive': true,
    'contentAsHTML': true,
    'autoClose': true,
    'trigger': 'click',
    'onlyOne': true,

    // ...

    // The coup de grâce ...
    'functionReady': function(){
        $('.tooltipster-default .close').on('click', function(e){
            e.preventDefault();
            $('body').click();
        });
    }
});

HTML

<span class="tooltip" title="<h3>Title <a title='Close' href='#' class='close'></a></h3><p>This is my tooltip content!">I have a tooltip!</span>

The JSFiddle

http://jsfiddle.net/hpKST/1/

Why it works

The combination of autoClose and trigger help in closing the Tooltip whenever a person clicks outside the interactive Tooltip. The functionReady callback allows you to bind a function to take advantage of this and delegate a function to click the body while the Tooltipster is open, thus closing the Tooltip.

I hope this helps! :)

Upvotes: 1

Louis Ameline
Louis Ameline

Reputation: 2889

That's because the HTML does not exist in the DOM when you try to bind your function. Insert your content as jQuery object instead and make your bindings on it.

Edit : my answer is wrong, because the user has a delegated handler, I missed that. I give the right answer here : https://github.com/iamceege/tooltipster/issues/145

Upvotes: 0

Related Questions