jquery tooltip con retraso en el show

Escribí un script de información de herramientas muy simple con pre retraso en el show.

pero tengo algun problema con mi codigo

No quiero mostrar también la información sobre herramientas que tiene un tiempo de desplazamiento inferior a 500 ms, pero tengo un efecto de parpadeo debido al efecto de animación fadeTo ()

esto significa que cuando muevo el ratón sobre .imgSpan y luego desencojo rápidamente el mouse a menos de 500 ms, la etiqueta .img se mostrará después de 500 ms y se ocultará rápidamente

aqui esta mi codigo

$(document).ready(function ()
{
    $('.img').css('display','none');
});
$('.imgSpan').hover(
function(){
    $(".imgSpan:hover .img").delay(500).fadeTo(500, 1);
},
function(){
    $(".img").css("display", "none");
    $(".img").fadeTo(0, 0);
}
);

Código HTML:

<span class='imgSpan'>
<a>
<img src='/images/image.png' class='middle' />
</a>
<img class='img' src='image_path' alt='image' />

notas:

No quiero perder el efecto de animación.

No quiero usar ningún plugin

Respuestas a la pregunta(2)

Su respuesta a la pregunta