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ư
on
và off
.
- Nó 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
Nguồn
2013-08-06 17:53:05
Nếu hiệu ứng không quan trọng, '$ (" #elementid ") .tooltip ({show: {delay: 2500}});' là đủ. – SNag