How to put close button at jquery tooltip

问题

I've used this tooltip at my webpage. Now, I want to put a "close button" in the tooltip, so if user click on that button, the tooltip will be closed(Though that tooltip close automatically after certain of time but I need to add close button feature too). This is my tooltip:

I need when user click on the close button, the tooltip will be closed.

I put my testing code at jsfiddle.

So, basically I hope, my code should be like this:

$('.tooltipster-content').on('click', '.close', function() {
    $('tooltipster-base').hide();
});

But, this code isn't working at my webpage.

回答1:

The reason it is not working is because the event that you are delegating to in your fiddle is not present on the page when you're binding the event. Try the following:

$(document).on('click', '.close', function() {
    $('.tooltipster-base').hide();
});

In addition, you were missing the . on the front of the $('.tooltipster-base') jQuery selector within your bound click callback.

DEMO

回答2:

I think that it will be so more correct:

$(document).on('click', '.close', function() {
    $('.tooltip').tooltipster('hide');
});

DEMO

回答3:

try This

$(".close").click(function(){
$(this).parent().hide();
});

Better to Edit tooltipster.min.js

find m.showTooltip(); in your tooltipster.min.js

Add below lines under m.showTooltip(); in your tooltipster.min.js

$(".close").parent().parent().show();                               
$(".close").click(function(){$(this).parent().parent().hide();});

Fiddle

回答4:

Here is updated solution for tooltipster^4.0:

functionReady: function (instance, helper) {
    $(instance._$tooltip).on('click', '.close-btn', function () {
        instance.close();
    });
}

来源：https://stackoverflow.com/questions/24631883/how-to-put-close-button-at-jquery-tooltip