2013-01-17 15 views
9

Tôi cần thêm một phần trước vào các chú giải công cụ UI của jQuery. Tôi đang sử dụng phiên bản mới nhất (1.9) và muốn các mẹo mở 2 giây sau khi chúng được di chuột qua.Tôi cần phải thêm một phần trước vào jQuery UI Tooltips nhưng dường như không thể tìm ra được

tôi kêu gọi những lời khuyên trong phần đầu của tôi sử dụng:

<script> 
    $(function() { 
     $(document).tooltip({ predelay:2000,}); 
    }); 
</script> 

Nhưng khi họ đang bị sa thải, họ không có bất kỳ sự trì hoãn nào ... bất cứ sự giúp đỡ?

Trả lời

21

sử dụng này

$("#elementid").tooltip({ 
    show: { 
    effect: "slideDown", 
    delay: 250 
    } 
}); 
+9

Nếu hiệu ứng không quan trọng, '$ (" #elementid ") .tooltip ({show: {delay: 2500}});' là đủ. – SNag

0

IE có vấn đề với lủng lẳng dấu phẩy, có lẽ cố gắng loại bỏ điều đó và nhìn thấy nếu mà giúp:

$(document).tooltip({ delay:2000 }); 
+0

Điều này không hiệu quả đối với tôi .. Tôi có thể thấy chú giải công cụ mặc dù vậy, nhưng giá trị trễ không có sự khác biệt. Câu trả lời được chấp nhận kết hợp chính xác sự chậm trễ. – SNag

+1

'predelay' không phải là thuộc tính chính xác. –

4

tôi đã cùng một vấn đề nhưng cuối cùng đã đưa ra giải pháp này:

var opendelay = 500; 
var closedelay = 500; 
var target = $('.selector'); 
target.tooltip({ /* ... */ }); 
target.off('mouseover mouseout'); 
target.on('mouseover', function(event) { 
    event.stopImmediatePropagation(); 
    clearTimeout(target.data('closeTimeoutId')); 
    target.data('openTimeoutId', setTimeout(function() { target.tooltip('open'); }, opendelay)); 
}); 
target.on('mouseout', function(event) { 
    event.stopImmediatePropagation(); 
    clearTimeout(target.data('openTimeoutId')); 
    target.data('closeTimeoutId', setTimeout(function() { target.tooltip('close'); }, closedelay)); 
}); 

Về cơ bản những gì nó làm là:

  • Vô hiệu hóa sự kiện onMouseOver mặc định cho các tooltip
  • Thêm một mouseover-event mới cho tooltip mà bị trì hoãn sử dụng setTimeout()
  • Thêm một mouseout-event mới mà hủy bỏ thời gian chờ (điều này ngăn chặn các tooltip hiển thị trong trường hợp chuột rời khỏi khu vực mục tiêu trước khi độ trễ bị trễ)
  • THƯỞNG: Nó cũng thêm một "đóng cửa" tương tự như "opendelay" aka "predelay" bằng cách sử dụng cùng kỹ thuật
  • event.stopImmediatePropagation(); chỉ cần thiết một số trường hợp. ví dụ. nếu bạn muốn phần tử tooltip hiển thị trong khi di chuột qua IT (sau khi nó được mở). Nếu bạn muốn điều này, hãy đăng ký cùng một sự kiện di chuột trên chú giải công cụ: target.tooltip({ open: function (event, ui) { ui.tooltip.hover(..., ...); } });
  • p.s. bạn cũng có thể chuỗi một số cuộc gọi này như onoff.
  • có thể có thể thay thế target bên trong sự kiện-chức năng theo this hoặc $(this). Nhưng tôi không chắc chắn và chưa thử; có thể không hoạt động sau khi tất cả.
  • Nếu bạn không cần closeDelay bạn chỉ cần xóa các dòng có chứa closeTimeoutId hoặc closedelay và loại bỏ mouseout trong target.off('mouseover mouseout'); hoặc đặt nó là 0
  • Cũng vậy với nếu bạn không cần openDelay ... chỉ cần theo cách khác xung quanh
Các vấn đề liên quan