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

Question

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

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

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

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

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

मैं इसे गतिशील रूप से बनाए गए तत्वों से कैसे बांध सकता हूं? आमतौर पर मैं इसे जकुरी लाइव () विधि के माध्यम से करता हूं। हालांकि, वह कौन सी घटना है जिसे मैं बांधने के लिए उपयोग करता हूं? मुझे यकीन नहीं है कि 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();
});

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

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

Comments

हम्म अच्छा सवाल है, यह मदद करेगा? github.com/twitter/bootstrap/issues/2374

— टिम

यह एक दिलचस्प पढ़ा है, लेकिन मैं केवल एक प्रकार का टूलटिप चाहता हूं। मैं बस यह सुनिश्चित करना चाहता हूं कि टूलटिप चयनकर्ता से मेल खाने वाले किसी भी गतिशील रूप से जोड़े गए तत्वों को जोड़ा जाए, जो ऐसा नहीं है।

— Durden2.0

बड़ा सवाल है। ट्विटर की ओर से एक ओवरसाइट की तरह लगता है।

— ल्यूक द ऑबस्क्योर

@ durden2.0 ईसाइयों ने आपके लिए कैसे काम किया? देखभाल के रूप में सही स्वीकार करने के लिए?

— रुस्लान उरलॉव्स

वास्तव में आपके प्रश्न से संबंधित नहीं है, लेकिन ... मुझे इस relविशेषता को हाइजैक करने के लिए यह बुरी शैली लगती है । यह गैर-शब्दार्थ है और एक दशक पहले हैक के रूप में उत्पन्न हुआ था। आजकल, हर एक ब्राउज़र कई वर्षों से वापस जा रहा है, data-*विशेषताओं का समर्थन करता है और उनके उपयोग न करने का कोई और कारण नहीं है।

— टी गुयेन

Answer 1

इसको आजमाओ:

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

Comments

महान। यह सही उत्तर है, क्योंकि यह मूल रूप से जियो का विकल्प है।

— माहन

@ कैलविन एल यदि एक चयनकर्ता प्रदान किया जाता है, तो टूलटिप वस्तुओं को निर्दिष्ट लक्ष्यों को सौंप दिया जाएगा।

— टेरी

इस समाधान के बारे में मुझे जो पसंद नहीं है वह यह है कि आपके पास टूलटिप्स के एकाधिक कॉन्फ़िगरेशन नहीं हो सकते हैं। उदाहरण के लिए, यह काम नहीं करता है यदि आपके पास टूलटिप्स हैं जो शीर्ष पर रखे गए हैं और अन्य जिन्हें नीचे रखा गया है।

— barbolo

@barbolo, अलग विन्यास के लिए बस अलग चयनकर्ताओं का उपयोग करें। यह सही उपाय है। Btw, यह पॉपओवर के साथ भी काम करता है।

— एनरिको कारलेसो

बूटस्ट्रैप 3 का उपयोग $ ('बॉडी'); टूलटिप ({चयनकर्ता: '[डेटा-टॉगल = टूलटिप]'});

— MERT DO .AN

Answer 2

यदि आपके पास कई टूलटिप कॉन्फ़िगरेशन हैं, जिन्हें आप इनिशियलाइज़ करना चाहते हैं, तो यह मेरे लिए अच्छा काम करता है।

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

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

Comments

महान टिप। मुझे इसे $ ("बॉडी") में बदलना था। टूलटिप ({चयनकर्ता: '[डेटा-टॉगल = "टूलटिप"]'});

— जफिन

यह बूटस्ट्रैप 3. ग्रेट के साथ कैसा होना चाहिए!

— गंभीर

महान! अतिरिक्त चौड़ाई से बचने के लिए एक टेबल एड कंटेनर: 'बॉडी' के अंदर उपयोग के लिए।

— शॉक_गोन_विल्ड

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

— अनबीस

बूटस्ट्रैप 4 के साथ भी काम करता है!

— यूजीन कुलबुहोव

Answer 3

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

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

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

Comments

यह बहुत उपयोगी था क्यों .on ('होवर') सही काम नहीं करेगा।

— एडम

यह सब मुझे हैंडलबार.जेएस के उपयोग के अपने कार्यान्वयन के लिए उपयोग करने की आवश्यकता थी। अगर मैं handlebars.js का उपयोग नहीं कर रहा था, तो स्वीकृत उत्तर ने भी काम किया।

— HPWD

यह है कि मैं ऐसा कैसे करता था, लेकिन आप बहुत सारे विकल्प खो देते हैं जैसे होवर देरी कि आपको मैन्युअल रूप से इसे लागू करने की आवश्यकता होगी जो मुझे लगता है।

— डेविडशेकर

Answer 4

मैंने अब यहाँ उत्तर दिया है: https://stackoverflow.com/a/20877657/207661

TL; DR: आपको कोड की केवल एक पंक्ति की आवश्यकता है जो दस्तावेज़ तैयार घटना में चलती है:

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

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

Comments

यह सबसे अच्छा जवाब है।

— क्रिस मैरिसिक

इसने मेरे केस के लिए काम किया। मैंने 2.26.2 टेबल के साथ टेब्लेटर्स का उपयोग किया और अजाक्स कॉल के माध्यम से आबादी का मान बढ़ाया। समस्या यह थी कि HTML टूलटिप को प्रस्तुत आउटपुट के बजाय HTML पाठ के रूप में दिखाया गया था। यह एकमात्र समाधान है जो मेरे लिए पहली बार में काम किया। +1 और बहुत-बहुत धन्यवाद!

— अनुराग

Answer 5

मेरे लिए, यह js वही समस्या उत्पन्न करता है जो पाओला के साथ होती है

मेरा समाधान:

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

Answer 6

पूरे शरीर में इसे खोजने के बजाय। मेरे विचार से ऐसे परिदृश्यों में पहले से ही उपलब्ध डायनामिक शीर्षक विकल्प का उपयोग किया जा सकता है:

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

Answer 7

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

$('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>