Chú giải công cụ giao diện người dùng Jquery. Đặt thời gian chờ và đặt sự kiện di chuột. Chú giải đóng băng trên di chuột

Question

Tôi đã googled khoảng 2 ngày và không thể tìm ra cách đặt thời gian chờ cho http://api.jqueryui.com/tooltip/ ???

Có lẽ tôi nên sử dụng jquery hoverIntent?

đây là mã của tôi

$('*[class*="help_"]').tooltip({ 
    open: function(e,o){ 
     $(o.tooltip).mouseover(function(e){ 
      $('*[class*="help_"]').tooltip('open'); 
     }); 
     $(o.tooltip).mouseout(function(e){ 
     });   
    }, 
    close: function(e,o) {} 
}); 

Answer 1

Cố gắng này?

$(".selector").tooltip({ show: { duration: 800 } }); 

Link: http://api.jqueryui.com/tooltip/#option-show

Answer 2

Tôi cũng đã tìm kiếm một giải pháp tương tự, cho thấy các tooltip bình thường, nhưng khi di chuột trên tooltip nó nên ở lại (nội dung của một tooltip là một số nút).

Tôi không muốn toàn bộ khung công tác (qtip) làm điều đó, tôi đã sử dụng jqUI trên toàn bộ trang web của mình.

vì vậy tôi đã làm điều này:

$(document).tooltip({ 
    show: null, // show immediately 
    items: '.btn-box-share', 
    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(); }) 
     } 
    ); 
    } 
}); 

Answer 3

Tôi có một giải pháp tốt, lấy cảm hứng từ a jQuery forum thread:

var mouseLeaveTimer; 
$('.selector').tooltip(
    open: function(){ 
     // make sure all other tooltips are closed when opening a new one 
     $('.selector').not(this).tooltip('close'); 
    } 
}).on('mouseleave', function(e){ 
    var that = this; 

    // close the tooltip later (maybe ...) 
    mouseLeaveTimer = setTimeout(function(){ 
     $(that).tooltip('close'); 
    }, 100); 

    // prevent tooltip widget to close the tooltip now 
    e.stopImmediatePropagation(); 
}); 

$(document).on('mouseenter', '.ui-tooltip', function(e){ 
    // cancel tooltip closing on hover 
    clearTimeout(mouseLeaveTimer); 
}); 

$(document).on('mouseleave', '.ui-tooltip', function(){ 
    // make sure tooltip is closed when the mouse is gone 
    $('.selector').tooltip('close'); 
}); 

[Cập nhật:. Amit Added a gist cho giải pháp trên với sửa]

Answer 4

Phiên bản này đảm bảo chú giải công cụ vẫn hiển thị đủ lâu để người dùng di chuyển chuột qua chú giải công cụ và vẫn hiển thị cho đến khi hết chuột. Tiện dụng cho phép người dùng chọn một số văn bản từ chú giải công cụ. Một phần của mã xuất phát từ Antonimo.

$(document).on("click", ".tooltip", function() { 
    $(this).tooltip(
     { 
      items: ".tooltip", 
      content: function(){ 
       return $(this).data('description'); 
      }, 
      close: function(event, ui) { 
       var me = this; 
       ui.tooltip.hover(
        function() { 
         $(this).stop(true).fadeTo(400, 1); 
        }, 
        function() { 
         $(this).fadeOut("400", function(){ 
          $(this).remove(); 
         }); 
        } 
       ); 
       ui.tooltip.on("remove", function(){ 
        $(me).tooltip("destroy"); 
       }); 
      }, 
     } 
    ); 
    $(this).tooltip("open"); 
}); 

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a> 

mẫu: http://jsfiddle.net/A44EB/123/

Answer 5

Một biến thể trên phản hồi từ @naveen. Điều này có một khoảng thời gian, nhưng với jQuery UI easing không hiển thị ở tất cả cho đến nửa thời gian qua (400ms trong trường hợp này là 800 mili giây). Nếu người dùng không giữ chuột di chuột, các chức năng này như ý đồ di chuột vì chú giải công cụ sẽ không bao giờ có sẵn. Cách đơn giản, thanh lịch để khắc phục sự cố.

$(".selector").tooltip({ show: { easing: "easeInExpo", duration: 800 } }); 

Answer 6

Tôi thích video này để thiết lập thời gian chờ:

$(document).tooltip({ 
    open: function(event, ui) { 
     ui.tooltip.delay(5000).fadeTo(2000, 0); 
    } 
}); 

Answer 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title> dynamic jquery ui tooltip </title> 

    <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <style> 
      #listing { 
       margin-left: 50px ; 
      } 
      .ui-tooltip { 
       background: #AAABBB ; 
       -webkit-box-shadow: 0 0 10px #aaa; 
       box-shadow: 0 0 10px #aaa; 
      } 
      body .ui-tooltip { 
       border-width: 4px; 
      } 
    </style> 
</head> 
<body> 
<div id="listing"> 
<div class="item-heading" id="item-1" > link-1 </div> 
</br> 
</br> 
<div class="item-heading" id="item-2"> link-2</div> 
</div> 
    <script> 

    // courtesy of: http://stackoverflow.com/a/15014759/65706 
    // and : http://stackoverflow.com/a/23487435/65706 
    $(document).tooltip({ 
     items: ".item-heading" 
     // set static content to the tooltip 
     // , content: '<p> <a href="http://www.google.com"> go to google </a>' 
     // or 
     // set a dynamic content based on the selected element id 
     , content: function() { 
       //attribute title would do it as well for non html5 
       //also any custom attribute name would do it for html5 
       var el_id= $(this).attr('id'); 
       var id=el_id.split('-')[1]; 
       var d_link = "http://www.somesite.com/page.php?id=" + id ; 
       d_link = "<p><a href=\"" + d_link + "\"> go to link " + 
       id + " </a></p>" ; 
       return d_link ; 
     } 
     , open: function(event, ui) { 
       ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "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(); }) 
        } 
       ); 
     } 
}); 
    </script> 
</body> 
</html>