क्यूटीआईपी 2 एकाधिक तत्व, वही टूलटिप

Question

मेरे पास एक ऐसा पृष्ठ है जिसमें मैं गतिशील रूप से ऐसे तत्व बनाते हैं जिन्हें टूलटिप्स की आवश्यकता होती है।

मैंने कुछ अलग दृष्टिकोणों की कोशिश की है और कुछ उत्तरों के लिए ऑनलाइन कोई फायदा नहीं हुआ है।

अब के रूप में, मैं यह है:

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'} 
    }); 
} 

क्या मैं के लिए देख रहा हूँ किसी तरह इन तत्वों के सभी ठीक उसी टूलटिप का उपयोग करने के लिए है। मैं चाहता हूं कि वे सभी एक ही सामग्री का उपयोग करें (इस मामले में एक ही रूप में) और टूलटिप को उसी तरह से संदर्भित करें (आईडी 'ui-tooltip-editLink' के साथ टूलटिप तत्व द्वारा)।

मेरे पास जो कुछ है, वह वर्तमान में पहला टूलटिप सही तरीके से बनाता है, लेकिन यदि मैं एक नया तत्व जोड़ता हूं और टूलटिप्स को फिर से सौंपता हूं, तो यह नए तत्व के लिए एक अलग आईडी के साथ एक पूरी नई टूलटिप बनाता है।

क्या कोई भी एकाधिक तत्वों को पूरा करने का कोई तरीका जानता है, वही टूलटिप दृष्टिकोण?

Answer 1

डायनामिक रूप से बनाए गए तत्व में qtip का उपयोग करने के लिए, आपको तत्व प्रारंभिकरण के दौरान qtip शामिल करने की आवश्यकता है।

उदा।

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

Answer 2

अफसोस की बात यह है कि ऐसा लगता है कि हमें प्रत्येक होवर/क्लिक तत्वों के लिए टूलटिप तत्व क्लोन करने की आवश्यकता है। https://github.com/Craga89/qTip2/issues/173

Answer 3

मैं समझ गए होंगे कि कैसे अगर कोई पाता है यह काम

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

आप पाते हैं तो एक टूलटिप div कई टूलटिप छवियों द्वारा साझा किया है करने के लिए:

क्रेग GitHub के अंक में यह उल्लेख है .html() डाल वहाँ पर, आप साझा टूलटिप एक बार दिखाई देखेंगे, और फिर जब तुम एक और छवि से सक्रिय, यह अब पहले एक के लिए काम करेंगे ...

टूलटिप पृष्ठ में कुछ छवियों पर एक वर्ग सेट है।

टूलटिपडिव आपकी टूलटिप सामग्री वाले div की आईडी है।

Answer 4

यही वह है जो मैंने किया था। मैंने अपने टूलटिप को एक अद्वितीय तत्व पर संलग्न किया।

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

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

हालांकि, अपने टूलटिप्स के सभी एक निश्चित स्थिति में प्रदर्शित किया जाएगा: और फिर मेरे अन्य तत्वों के सभी एक ही टूलटिप की जरूरत है कि सिर्फ अद्वितीय तत्व के टूलटिप प्रदर्शन ट्रिगर किया जाएगा। यह मेरे मामले में कोई समस्या नहीं थी क्योंकि मैं टूलटिप को मोडल के रूप में उपयोग कर रहा था। आपको cutom event विधियों के माध्यम से टूलटिप स्थिति का प्रबंधन करना होगा।

Answer 5

पर the answer of user738048 आधार पर, मेरे कार्य समाधान इस तरह है:

$('[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'); 
}); 

मेरे मामले में, पाठ वाले HTML तत्व की आईडी एक data-tooltipid विशेषता से लिया जाता है; मेरे href और onclick विशेषताएँ हटा दी गई हैं क्योंकि उन्हें टूलटिप द्वारा अप्रचलित कर दिया गया है।