Tooltip problems (fade out time)

Question

They there

I'm currently working on some tooltips using jQuery.

(function ($) {
$(document).ready(function () {
$(function () {
$(document).tooltip({
    content: function () {
        return $(this).prop('title');
    },
    show: null,
position: {
    my: "right top-25",
    at: "left+25 bottom"
  },
open: function( event, ui ) {
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, 100 );
  },
    close: function (event, ui) {
        ui.tooltip.hover(

        function () {
            $(this).stop(true).fadeTo(200, 1);
        },

        function () {
            $(this).fadeOut("200", function () {
                $(this).remove();
            })
        });
    }
});
});
});
})(jQuery);

I'm a beginner and got the code from somewhere else, tested more than one tho. But I'm having a problem, if you hover one link after another you will see that 'delay'. I'm talking about the slow fadeOut, I want them to fade out more fast, but I still should be able to reach the link on the tooltip.

Best solution would be to close the tooltip if another one opens.

Can you help me with that, always happy to learn something here :)

Edit:

It seems to work for me to add a delay instead of showing it directly: show: { delay: 250 }

Answer 1

You can change fadeOut duration in line 24. Remember duration it's in milliseconds.

function () {
    $(this).fadeOut( HERE GOES DURATION , function () {
        $(this).remove();
    })
});