jQuery UI Tooltip загрузка и показ с задержкой

На сайте есть ссылки с подсказками с динамическим контентом. Я использую JQuery UI Tooltip для их отображения. Я бы не хотел, чтобы каждый раз пользователь случайно удерживал курсор над ссылкой, отображающей подсказку. Я хочу показать всплывающую подсказку, только если она задерживает курсор над ссылкой в течение нескольких секунд. Он должен работать как в Gmail, когда вы наводите имя отправителя, вы видите информацию о нем (см. picture).jQuery UI Tooltip загрузка и показ с задержкой

мне нужна подсказка, которую пользователь может взаимодействовать с, так что я использую этот код (спасибо Antonimo https://stackoverflow.com/a/15014759/274417)

$(document).tooltip({ 
    show: null, // show immediately 
    items: 'input', 
    hide: { 
    effect: "", // fadeOut 
    }, 
    open: function(event, ui) { 
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast"); 
    }, 
    close: function(event, ui) { 
    ui.tooltip.hover(
     function() { 
      $(this).stop(true).fadeTo(400, 1); 
      //.fadeIn("slow"); // doesn't work because of stop() 
     }, 
     function() { 
      $(this).fadeOut("400", function(){ $(this).remove(); }) 
     } 
    ); 
    } 
});

Example here (вы можете увидеть все это безобразие, когда мышь зависания на элементах с подсказками)

Как это сделать лучше? Использовать timeOut? Или, может быть, я должен использовать плагин hoverIntent? Но как это будет закодировано?

источник

2014-01-14 Zhivago

вы смотрели на вопрос HTTP ли: // StackOverflow. com/вопросы/16465744/jquery-tooltip-with-delay-on-show – Arun

Да, не мое дело, я думаю. – Zhivago

Вот один из способов сделать это:

HTML

<body> 
    <p><label for="age">Your age:</label><input class="age" id="age" /></p> 
    <p><label for="age">Your age:</label><input class="age" id="age2" /></p> 
    <p><label for="age">Your age:</label><input class="age" id="age3"/></p> 
    <p><label for="age">Your age:</label><input class="age" id="age4"/></p> 
    <p><label for="age">Your age:</label><input class="age" id="age5"/></p> 
</body>

JQuery

var timeout; 
var finishTimeout = false; 
$(".age").tooltip({ 
    show: null, // show immediately 
    items: 'input', 
    hide: { 
    effect: "", // fadeOut 
    }, 
    content: function(){ 
     if(!finishTimeout) 
      return false; 
     //ajax call here 
     return 'test'; 
    }, 
    open: function(event, ui) { 
    //ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast"); 
    }, 
    close: function(event, ui) { 
    ui.tooltip.hover(
     function() { 
      $(this).stop(true).fadeTo(400, 1); 
      //.fadeIn("slow"); // doesn't work because of stop() 
     }, 
     function() { 
      $(this).fadeOut("400", function(){ $(this).remove(); }) 
     } 
    ); 
    } 
}); 
$('.age').mouseover(function(){ 
    var el = $(this); 
    timeout = setTimeout(function(){ 
     finishTimeout = true; 
     el.tooltip("open"); 
     finishTimeout = false; 
    },1000); 
}); 
$('.age').mouseout(function(){ 
    clearTimeout(timeout); 
});

Пример http://jsfiddle.net/4sSkc/

источник

2014-01-14 20:23:58 Trevor

@Roman Пожалуйста, отметьте этот ответ, как принято, он ответил на ваш вопрос, в противном случае дайте обратную связь. Спасибо – Trevor

Да, я знаю об этом варианте, спасибо. Но все равно ненужные запросы на сервер, когда курсор наводит ссылки, не так ли? – Zhivago

@Roman Где вы указываете запрос сервера? – Trevor

jQuery UI Tooltip загрузка и показ с задержкой

ответ

Смежные вопросы