Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как убрать всплывающую подсказку (https://javascript.ru/forum/jquery/77123-kak-ubrat-vsplyvayushhuyu-podskazku.html)

Jimy 27.03.2019 10:56

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

$('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 27.03.2019 11:13

Попробуйте так:
$('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 27.03.2019 11:26

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

Nexus 27.03.2019 11:32

https://jsfiddle.net/8gLrt3v1/

Malleys 27.03.2019 11:47

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

Jimy 27.03.2019 11:48

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


Часовой пояс GMT +3, время: 05:24.