jQuery qTip: Cách đính kèm một div chú giải công cụ vào nhiều div mục tiêu?

Question

Hành vi bình thường đối với plugin jQuery qTip là tạo một div ẩn mới cho mỗi mục công cụ được chỉ định. Có cách nào để buộc một yếu tố tooltip ẩn duy nhất vào nhiều mục tiêu, để tránh làm lộn xộn DOM không?

giả tạo Ví dụ:

<div id="foo1"></div> 
<div id="foo2"></div> 

<script> $("#foo1,#foo2").qTip({"content":"test"}); </script> 

<!-- Creates two elements, rather than one: --> 
<div class="qtip" style="display:none;">test</div> 
<div class="qtip" style="display:none;">test</div> 

Nếu qTip là không thể làm được điều này, bất cứ ai có thể giới thiệu một plugin tooltip jQuery dựa trên hỗ trợ HTML giàu chỉ sử dụng một container tooltip đơn? Cảm ơn!

Answer 1

Bạn có thể xây dựng các hộp qTip động.

Html:

<a id="some-link" href="#">Show a qTip</a> 
<div id="hidden-element" style="display:none"></div> 

Javascript:

$('#some-link').click(function() { 
    $('#hidden-element').qtip({ 
     content: { 
      text: '<div>Insert content here</div>', 
      prerender: true //as of beta3, this option is false by default 
     }, 
     // etc, etc 
    }); 

    qtip = jQuery('#hidden-element').qtip('api'); 
    qtip.show(); 

    return false; 
}); 

Xem http://craigsworks.com/projects/qtip/docs/api biết chi tiết về các API qTip

EDIT: 22 Tháng 6 năm 2011 (justgrumpy) - As of beta3 the qtip does not prerender by default. 'prerender' phải được đặt thành 'true' trong tùy chọn nội dung cho qtip để hiển thị động.

Answer 2

Tôi là người hâm mộ của jQuery Tools Tooltip. Nó cho phép bạn xác định cấu trúc chú giải công cụ của riêng bạn trong HTML và bạn có thể áp dụng chú giải công cụ đó cho bao nhiêu phần tử tùy thích.

Answer 3

Thay vì làm danh sách phần tử được phân tách bằng dấu phẩy, hãy sử dụng bộ chọn lớp. Dưới đây là ví dụ:

$('.selectorClass').qTip({arguments:here}); 

Tôi chưa thử nghiệm điều này, nhưng nó sẽ hoạt động tốt.

Answer 4

Tôi đã tìm ra cách để có một tooltip div được chia sẻ bởi nhiều hình ảnh tooltip nếu có ai tìm thấy nó tiện dụng

$(".tooltipBearing").qtip({ 
          content: { 
           text: $("#tooltipDiv").html() 
          }   
         }); 

Nếu bạn thất bại trong việc đưa .html() vào đó, bạn sẽ xem chú giải công cụ được chia sẻ hiển thị một lần và sau đó khi bạn kích hoạt nó từ một hình ảnh khác, nó sẽ không hoạt động cho hình ảnh đầu tiên nữa ...

tooltipBearing là một lớp được đặt trên một số hình ảnh trong trang.

tooltipDiv là ID của div chứa nội dung chú giải công cụ của bạn.