Cửa sổ bật lên Bootstrap cho di chuột trong bảng: Không thể nhấp vào liên kết bên trong cửa sổ bật lên

Question

Tôi có các hàng trong bảng nơi tôi hiển thị thông tin bổ sung trong cửa sổ bật lên twitter bootstrap.

Một vài lưu ý từ thiết kế tương tác tôi làm việc với:

• Popovers phải xuất hiện khi bạn di chuột hàng
• Popovers sẽ chứa 1 hoặc nhiều liên kết

Bây giờ, liên kết một phần là phần khó khăn. Nếu bạn di chuyển chuột từ hàng của bảng, đến cửa sổ bật lên (có chứa liên kết), cửa sổ bật lên sẽ biến mất!

Tôi đang tạo ra các popover với mã này:

var options = {placement: 'bottom', trigger: 'hover', html: true}; 
$(this).popover() 

- mà giả html liên quan bao gồm các liên kết được tạo ra và đưa vào data-content thuộc tính

Thông báo {placement: 'bottom' } này. Để có thể di chuyển chuột đến cửa sổ bật lên, tôi đã thử {placement: 'in bottom'} (thêm in từ khoá, tạo thành phần phần tử cửa sổ bật lên bên trong công cụ chọn).

Sự cố đối với các hàng trong bảng, điều đó không thực sự hợp pháp về HTML. Có lẽ đó là lý do tại sao placement: 'in bottom' ám chỉ xấu hơn nữa: Cửa sổ bật lên dán lên đầu chế độ xem của tôi.

Hãy thử bản demo của tôi trong My example on JSFiddle

Nó chứa các ví dụ ...

Câu hỏi của tôi là làm thế nào tôi nên xác định popover tôi, vì vậy mà nó có thể nhấp vào liên kết - trao những hạn chế do thiết kế tương tác?

Answer 1

Vấn đề là lờ mờ rằng cửa sổ bật lên thực hiện thao tác đó. Khi bạn đính kèm các popovers đến <tr> 's, và để cho cửa sổ bật lên phản ứng di chuột - và cửa sổ bật lên bị treo bên dưới đáy của <tr> - bạn sẽ không bao giờ có thể tiếp cận nội dung của cửa sổ bật lên.

Trigger: hover có thể dễ dàng được bắt chước bởi kích hoạt: thủ công như thế này

$('table').on('mouseenter', 'tr', function() { 
    $(this).popover('show'); 
}); 
$('table').on('mouseleave', 'tr', function() { 
    $(this).popover('hide');  
}); 

Thiết kích hoạt: nhãn hiệu cho phép chúng tôi để thao tác các hành vi popover. Giải pháp dưới đây cho biết thêm một chút chậm trễ đối với các điều kiện mouseenter/mouseleave và sau đó kiểm tra xem con chuột có ở trong cửa sổ bật lên hay không (bằng cách đính kèm sự kiện vào chính cửa sổ bật lên đó). Nếu con chuột ở trong cửa sổ bật lên, cửa sổ bật lên mới sẽ không được hiển thị và cửa sổ bật lên đang hoạt động sẽ không bị ẩn, ngay cả khi đã có một mouseenter -nên trong một cửa sổ khác <tr>. jsfiddle chia hai: http://jsfiddle.net/xZxkq/

var insidePopover=false; 

function attachEvents(tr) { 
    $('.popover').on('mouseenter', function() { 
     insidePopover=true; 
    }); 
    $('.popover').on('mouseleave', function() { 
     insidePopover=false; 
     $(tr).popover('hide'); 
    }); 
} 

$('table').on('mouseenter', 'tr', function() { 
    var tr=$(this); 
    setTimeout(function() { 
     if (!insidePopover) { 
      $(tr).popover('show'); 
      attachEvents(tr); 
     } 
    }, 200); 
}); 

$('table').on('mouseleave', 'tr', function() { 
    var tr=$(this); 
    setTimeout(function() { 
     if (!insidePopover) $(tr).popover('hide'); 
    }, 200); 
});