QTip2 Nhiều phần tử, cùng một chú giải công cụ

Question

Tôi có một trang mà trong đó tôi tự động tạo các phần tử cần chú giải công cụ.

Tôi đã thử một vài cách tiếp cận khác nhau và xem trực tuyến một số câu trả lời không có kết quả.

Tính đến bây giờ, tôi có điều này:

var $links = $('a.link'); 
var len = $links.length; 
for(var i = 0; i < len; i++){ 
    var $ele = $($links[i]); 
    $ele.qtip({ 
     id: 'editLink', 
     overwrite: false, 
     content: { 
      text: $linkEditor, 
      title: { 
       text: 'Edit Link', 
       button: true 
      } 
     }, 
     position: { 
      my: 'top center', 
      at: 'bottom center', 
      viewport: $(window) 
     }, 
     show: { 
      event: 'mouseover', 
      solo: true 
     }, 
     hide: false, 
     style: {classes: 'ui-tooltip-shadow ui-tooltip-red'} 
    }); 
} 

Những gì tôi đang tìm kiếm là một số cách để có tất cả những yếu tố này sử dụng cùng một tooltip chính xác. Tôi muốn tất cả họ sử dụng cùng một nội dung (trong trường hợp này là một biểu mẫu duy nhất) và tham chiếu chú giải công cụ theo cùng một cách chính xác (bằng phần tử tooltip với id 'ui-tooltip-editLink'). Với những gì tôi có, nó hiện đang tạo chú giải công cụ đầu tiên một cách chính xác, nhưng nếu tôi thêm phần tử mới và gán lại chú giải công cụ, nó sẽ tạo ra một chú giải công cụ hoàn toàn mới với một id khác cho phần tử mới.

Có ai biết một số cách để hoàn thành nhiều yếu tố, cùng một cách tiếp cận chú giải công cụ không?

Answer 1

Để sử dụng qtip trong phần tử được tạo động, bạn cần phải bao gồm qtip trong quá trình khởi tạo phần tử.

ví dụ:

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"}); 

Answer 2

Đáng buồn là có vẻ như chúng ta cần sao chép phần tử chú giải công cụ cho từng yếu tố di chuột/nhấp chuột.

Craig đề cập này trong vấn đề GitHub: https://github.com/Craga89/qTip2/issues/173

Answer 3

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 đặt .html() trên đó, bạn sẽ thấy chú giải công cụ được hiển thị một lần và sau đó khi bạn kích hoạt nó từ hình ảnh khác, nó sẽ không còn 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.

Answer 4

Đây là những gì tôi đã làm. Tôi đính kèm chú giải công cụ của tôi trên một yếu tố duy nhất. Và sau đó tất cả các yếu tố khác của tôi cần các tooltip cùng sẽ chỉ kích hoạt hiển thị tooltip các yếu tố độc đáo của:

$('#unique-element').qtip({ 
    content: {text: 'My Tooltip'}, 
}); 

$('.other-elements').click(function(){ 
    $('#unique-element').qtip('show'); 
}); 

Tuy nhiên, tất cả các chú giải công cụ của bạn sẽ được hiển thị ở một vị trí cố định. Đây không phải là một vấn đề trong trường hợp của tôi bởi vì tôi đã sử dụng chú giải công cụ như là phương thức. Bạn sẽ phải quản lý vị trí tooltip thông qua cutom event phương pháp.

Answer 5

Dựa trên the answer of user738048, giải pháp làm việc của tôi là như thế này:

$('[data-tooltipid]').each(function() { 
    var ttid = $(this).data('tooltipid'); 
    $(this).qtip({ 
     content: { 
      text: $('#'+ttid).html(), 
     }, 
     position: { 
      my: 'top left', 
      at: 'bottom left', 
      target: $(this) 
     } 
    }).removeAttr('href').removeAttr('onclick'); 
}); 

Trong trường hợp của tôi, id của phần tử HTML có chứa nội dung được lấy từ một thuộc tính data-tooltipid; các thuộc tính href và onclick của chúng tôi bị xóa vì chúng bị lỗi thời bởi chú giải công cụ.