Twitter Bootstrap, hiển thị tất cả các popovers tại một div

Question

Tôi đã cố gắng để đạt được những điều sau đây bằng cách sử dụng Twitter Bootstrap 2.0 và nó là popover-plugin, nhưng sau một vài giờ, tôi vẫn không thể tìm ra.

Hãy nói rằng, ở góc dưới bên trái của trang của tôi, tôi có một bức ảnh cho thấy một con chim. Con chim này nên "nói" mọi popover, ví dụ như những con cho một hình thức đăng ký, sẽ xuất hiện trên đầu trang của con chim. Điều này có thể không?

Để hiểu rõ hơn, tôi đã tạo một trang web thử nghiệm over here. Nếu bạn di chuột qua các trường đăng ký, có các popovers. Tôi muốn họ xuất hiện trên con chim-img ở góc dưới bên trái, nhưng tôi không biết làm thế nào để đạt được điều này. Nó sẽ là tuyệt vời nếu bạn có thể giúp tôi.

Answer 1

Phương pháp 1:

Việc xử lý di chuột jQuery có một "trong" và một phương pháp "out", và trong mẫu của bạn, bạn chỉ được phân công "trong" phương pháp, để hiển thị popup. Điều này là tốt, nhưng thay vì đính kèm nó vào "này", bạn nên đính kèm nó vào hình ảnh chim của bạn. Đảm bảo thay đổi trình kích hoạt của cửa sổ bật lên thành thủ công. Sau đó, trong "ra" phương pháp di chuột, bạn chỉ cần ẩn cửa sổ bật lên.

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "trigger": 'manual', 
      "placement":'top', 
       }).popover('show'); 
}, 
function() 
{ 
    $('#birdie').popover('hide'); 
}); 

Cách 2:

Cách khác, hãy giữ những gì bạn có, nhưng sử dụng "chọn" tùy chọn được cung cấp, và cung cấp cho nó hình ảnh chim của bạn như một tham số, điều này sẽ kích hoạt các popover khỏi sự kiểm soát của bạn , nhưng ủy quyền nó cho hình ảnh chim của bạn.

chọn: nếu một chọn được cung cấp, các đối tượng tooltip sẽ được giao cho các mục tiêu quy định

$('#registerHere input').hover(function() 
{ 
    $('#birdie').popover({ 
      "selector": "#birdie", 
      "placement":'top', 
       }).popover('show'); 
}); 

EDIT: nhập mẫu mã. Tôi không có cơ hội để kiểm tra điều này, vì vậy có thể có một số lỗi cú pháp hoặc một cái gì đó, nhưng ý tưởng chung là có.