How to delayed tooltip when mouse over on tooltip

Question

Hi I am working on jquery ui tooltip.i have display image on tooltip and also display content on tooltip. my problem is the when mouse over on tooltip that time tooltip is hide. but i want display tooltip when mouse over that tooltip and when mouse release on tooltip that time tooltip hide

My code is in jsfiddle

      <a id="riverroad" href="#" title=""  >display</a>.

Answer 1

you can try this solution

$( "#riverroad" ).tooltip({ 
        content: '<img src="https://kohler.scene7.com/is/image/PAWEB/Category_Template?$PDPcon$&$gradient_src=PAWEB%2Forganic-gradient&$shadow_src=PAWEB%2FBlank&$Badge1_src=PAWEB%2FBlank&$Badge4_src=PAWEB%2FBlank&$Badge3_src=PAWEB%2FBlank&$Badge2_src=PAWEB%2FBlank&$product_src=is{PAWEB%2Fzaa86577_rgb}" width="150" height="150"/><p><a href="http://www.google.com">content</a></p>', 

    show: { duration: 500,delay: 1000 } ,
    open: function(event, ui)
    {
        if (typeof(event.originalEvent) === 'undefined')
            return false;

        $('div.ui-tooltip').not('#' + $(ui.tooltip).attr('id')).remove();
    },
    close: function(event, ui)
    {
        ui.tooltip.hover(function()
        {
            $(this).stop(true).fadeTo(400, 1); 
        },
        function()
        {
            $(this).fadeOut('400', function() { $(this).remove(); });
        });
    }
});