गतिशील रूप से बनाए गए तत्वों के लिए मैं ट्विटर बूटस्ट्रैप टूलटिप्स को कैसे बांधूं?

Question

मैं ट्विटर बूटस्ट्रैप टूलटिप्स उपयोग कर रहा हूँ जावास्क्रिप्ट के साथ निम्नलिखित की तरह:

$('a[rel=tooltip]').tooltip(); 

मेरे मार्कअप इस तरह दिखता है:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a> 

यह ठीक काम करता है, लेकिन मैं गतिशील <a> तत्वों को जोड़ने और टूलटिप्स 'नहीं कर रहे टी उन गतिशील तत्वों के लिए दिखा रहा है। मुझे पता है क्योंकि यह केवल इसलिए है। टोलटिप() एक बार जब दस्तावेज सामान्य jquery $(document).ready(function() कार्यक्षमता के साथ लोड हो गया है।

गतिशील रूप से बनाए गए तत्वों के लिए मैं इसे कैसे बांध सकता हूं? आमतौर पर मैं jquery लाइव() विधि के माध्यम से ऐसा करता हूं। हालांकि, क्या घटना है जिसे मैं बांधने के लिए उपयोग करता हूं? मुझे यकीन नहीं है कि jquery .live() के साथ बूटस्ट्रैप .tooltip() को कैसे हुक अप करें।

मैं एक तरह से यह काम करने के लिए मिल गया है कुछ इस तरह है:

/* Add new 'rows' when plus sign is clicked */ 
$("a.add").live('click', function() { 
    var clicked_li = $(this).parent('li'); 
    var clone = clicked_li.clone(); 

    clone.find(':input').each(function() { 
     $(this).val(''); 
    }); 

    clicked_li.after(clone); 
    $('a[rel=tooltip]').tooltip(); 
}); 

यह काम करता है, लेकिन एक तरह से hackish लगता है। मैं $ (तैयार) कॉल में सटीक वही .tooltip() लाइन भी कॉल कर रहा हूं। तो, जब तत्व पहले लोड होता है और उस चयनकर्ता से मेल खाता है तो टूलटिप के साथ दो बार मौजूद तत्वों को दो बार करें?

मुझे इस दृष्टिकोण के साथ कोई समस्या नहीं दिख रही है। मैं सिर्फ व्यवहार की सर्वोत्तम अभ्यास या समझ की तलाश में हूं।

Answer 1

इस एक का प्रयास करें:

$('body').tooltip({ 
    selector: '[rel=tooltip]' 
}); 

Answer 2

मेरे लिए, केवल पकड़ने mouseenter घटना थोड़ा गाड़ी थी, और टूलटिप नहीं दिख रहा था/ठीक से छुपा। मैं इस लिखने के लिए किया था, और यह अब पूरी तरह से काम कर रहा है:

$(document.body).tooltip({selector: '[title]'}) 
.on('click mouseenter mouseleave','[title]', function(ev) { 
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide'); 
}); 

Answer 3

मेरे लिए, यह जे एस एक ही समस्या है कि Paola

मेरे समाधान के साथ होता है reproduces इन उत्तरों के संयोजन ने मुझे सबसे अच्छा परिणाम दिया - मुझे अभी भी टूलटिप को स्थानांतरित करने और इसे प्रासंगिक कंटेनर से जोड़ने की इजाजत दी गई है:

$('body').on('mouseenter', '[rel=tooltip]', function(){ 
    var el = $(this); 
    if (el.data('tooltip') === undefined) { 
    el.tooltip({ 
     placement: el.data("placement") || "top", 
     container: el.data("container") || false 
    }); 
    } 
    el.tooltip('show'); 
}); 

$('body').on('mouseleave', '[rel=tooltip]', function(){ 
    $(this).tooltip('hide'); 
}); 

प्रासंगिक HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip"> 
    <i class="icon-some-icon"></i> 
</button> 

Answer 4

मैंने पाया:

$(document).on('mouseenter','[rel=tooltip]', function(){ 
    $(this).tooltip('show'); 
}); 

$(document).on('mouseleave','[rel=tooltip]', function(){ 
    $(this).tooltip('hide'); 
}); 

Answer 5

आप एक से अधिक टूलटिप विन्यास है कि आप आरंभ करना चाहते हैं, तो यह मेरे लिए अच्छी तरह से काम करता है।

$("body").tooltip({ 
    selector: '[data-toggle="tooltip"]' 
}); 

फिर आप data विशेषताओं का उपयोग अलग-अलग तत्वों पर गुण सेट कर सकते हैं।

Answer 6

मैं अब पोस्ट किया है यहाँ का जवाब: https://stackoverflow.com/a/20877657/207661

टी एल; डॉ:

$(document.body).tooltip({ selector: "[title]" }); 

अन्य अधिक जटिल कोड अन्य उत्तर में सुझाव: आप कोड का केवल एक ही लाइन है कि दस्तावेज़ तैयार घटना में चलता है की जरूरत है आवश्यक प्रतीत नहीं होता (मैंने बूटस्ट्रैप 3.0 के साथ इसका परीक्षण किया है)।

Answer 7

इसे पूर्ण शरीर में खोजने की बजाय।

$btn.tooltip({ 
    title: function(){ 
    return $(this).attr('title'); 
    } 
});