Как задать время появления всплывающего окна подсказки при наведении на ссылку?

Question

[Арсланали]

Здравствуйте.
Блок подсказки

<div class='title_block'>У этого заведения 6 отделов, 170 работников и много много денег<div id='triangle-down'></div></div>

Скрипт

$(document).ready(function(){

 	$(document).on('mouseover', '.item_element', function(){
    var _this = $(this).children('#title_block');

    setTimeout(view_block(_this), 1500);
  });

  $(document).on('mouseout', '.item_element', function(){
    var _this = $(this).children('#title_block');
    _this.css('opacity',0).css('display','none');
  });

 	function view_block(_this) {
    _this.css('display','block').css('opacity',1);
  }
 	
});
Вот сама подсказка.

Answer 1

[HamSter]

$(document).ready(function(){

        $('.item_element').on('mouseover', function(){
            var $this = $(this),
                el = $this.find('.title_block');
            
            setTimeout(function(){ view_block(el) }, 1500);
        });

        $('.item_element').on('mouseout', function(){
            var $this = $(this),
                el = $this.find('.title_block');

            hide_block(el);
        });

        function view_block(block) {
            block.css({'display':'block', 'opacity':1});
        }

        function hide_block(block) {
            block.css({'display':'none', 'opacity':0});
        }
      
    });

jsbin

Comments

[Сергей Тутуков]

Не совсем понимаю, зачем функции view_block() и hide_block(), если они выполняют тоже самое что и стандартные ф-ии show() и hide().
И как я понял должен появляться tooltip через 1500 если курсор ОСТАЛСЯ над элементом.

[Сергей Тутуков]

Надо еще продумать события для touch устройств.

[Арсланали]

Сергей Тутуков: да именно так. Но я буду менять значение к примеру на 1900

[Арсланали]

Работает, но при проведении по всем ссылкам и остановившись на одной нужной выдает такую картину imgur.com/a/1Xy0c

[Арсланали]

Вот такая картина когда провожу разом по всем imgur.com/a/J4Jc7

[Сергей Тутуков]

Может лучше взять уже готовые решения (есть delay):
tipso.object505.com
iamceege.github.io/tooltipster

[Арсланали]

Сергей Тутуков: Спасибо, красиво.

[Сергей Тутуков]

Арсланали
Если хочешь свой простенький, то codepen.io/STutukov/pen/MbgqMe

[Арсланали]

Сергей Тутуков: Спасибо большое, попробую.