Jquery ui tooltip doesn't reopen after disabling automatic closing

Question

I have following code for opening a tooltip:

javascript:

$(window).ready(function () {
            $('.tooltips').bind("mouseleave", function (event) {
                event.stopImmediatePropagation();
            }).tooltip({
                tooltipClass: "tooltip",
                position: {
                    my: "center bottom-20",
                    at: "center top",
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("<div>")
                            .addClass("arrow")
                            .addClass(feedback.vertical)
                            .addClass(feedback.horizontal)
                            .appendTo(this);
                    }
                },
                content: function () {
                    return $(this).prop('title');
                }
            });
            $(document).on('click', 'span.close', function () {
                $(this).closest('.tooltip').hide();
            });
        });

html:

<p>Testing hover <a href="#" class="tooltips" title="<h4>TITLE<span class='close'>X</span></h4><p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>">tooltip</a></p>

Fiddle: https://jsfiddle.net/e1wxzhg7/

Which only closes, for now, when clicking the span.close "button". When re-hovering the tooltip trigger nothing happens. I suppose it's because of the event.stopImmediatePropagation(); function.

How can I re-activate/re-initiate the tooltip after closing it?

Answer 1

The issue is because you are hiding the generated tooltip HTML using the CSS property of display: none, as you're calling hide() on it. This means that it does get called again, however it is invisible. Instead, you should use the built-in close option of the tooltip library. Try this:

$(document).on('click', 'span.close', function () {
    $('.tooltips').tooltip('close');
});

Example fiddle