Как убрать всплывающую подсказку
Добрый день! Решил сделать самодельную подсказку, появляющуюся при наведении на ячейку таблицы. Вроде получилось, но вот как её убрать, например, при уходе мыши из таблицы? Вот код:
$('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 ничего не получается - некрасиво моргает (правда, подсказка все же исчезает). Подскажите, как победить? Я смотрел ссылки на готовые подсказки, но интересно сделать свою и есть ли решение у предложенного способа? |
Попробуйте так:
$('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 |
Ваш пример работает так: подсказка появляется один раз, потом пропадает и все... Я уже думал какой-нибудь таймер прикрутить для иcчезновения при уходе с ячейки... Но вот как реализовать? Я практически чайник в Jqery...
|
|
https://jsfiddle.net/5ynurk9g/ чуть поправил, чтобы работало с клавиатуры и некоторых сенсорных экранов
|
Спасибо, разобрался!
|
Часовой пояс GMT +3, время: 05:24. |