Как убрать всплывающую подсказку

[Jimy]

Добрый день! Решил сделать самодельную подсказку, появляющуюся при наведении на ячейку таблицы. Вроде получилось, но вот как её убрать, например, при уходе мыши из таблицы? Вот код:

$('td').mouseenter(
function(){
	var cell_text=$(this).text();

	var offset = $(this).offset();
 
 
$('.banner').css({'top':offset.top});
$('.banner').css({'left':offse2.left});
 
$('.banner').text('Значение в ячейки' +cell_text );
$('.banner').css({'visibility':'visible'});
});
$('#first_table').mouseleave(function(){
	$('.banner').css({'visibility':'hidden'});
});

Вот с этим mouseleave ничего не получается - некрасиво моргает (правда, подсказка все же исчезает). Подскажите, как победить?
Я смотрел ссылки на готовые подсказки, но интересно сделать свою и есть ли решение у предложенного способа?

[Nexus]

Попробуйте так:

$('td').mouseenter(function() {
    const $this = $(this);
    var cell_text = $this.text(),
        offset = $this.offset();


    $('.banner').css({
        'top': offset.top,
        'left': offset.left
    }).text('Значение в ячейки' + cell_text).stop(true).fadeIn(300);
});

$('#first_table').mouseleave(function() {
    $('.banner').stop(true).fadeOut(300);
});

Js prettier: https://beautifier.io/
jq.stop
jq.fadeIn
jq.fadeOut

[Jimy]

Ваш пример работает так: подсказка появляется один раз, потом пропадает и все... Я уже думал какой-нибудь таймер прикрутить для иcчезновения при уходе с ячейки... Но вот как реализовать? Я практически чайник в Jqery...

[Nexus]

https://jsfiddle.net/8gLrt3v1/

[Malleys]

https://jsfiddle.net/5ynurk9g/ чуть поправил, чтобы работало с клавиатуры и некоторых сенсорных экранов

[Jimy]

Спасибо, разобрался!