बूटस्ट्रैप टूलटिप

Question

नहीं दिखा रहा है मैं अपने ऐप में बूटस्ट्रैप tooltip का उपयोग करने का प्रयास कर रहा हूं। वर्तमान में, मेरे पास निम्नलिखित हैं:

<button type="button" class="btn btn-default" 
     data-toggle="tooltip" data-placement="left" 
     title="Tooltip on left"> 
      Tooltip on left 
</button> 

दुर्भाग्य से, मेरा टूलटिप प्रदर्शित नहीं हो रहा है। मैं यह पता लगाने की कोशिश कर रहा हूं कि मैं क्या गलत कर रहा हूं। मुझे पता है कि यह जावास्क्रिप्ट के माध्यम से बनाया जा सकता है। हालांकि, मैं घोषणात्मक रूप से अपने टूलटिप को परिभाषित करने की कोशिश कर रहा हूं। मैंने पुष्टि की है कि Tooltip.js फ़ाइल शामिल की जा रही है। हालांकि, मैं यह नहीं समझ सकता कि मैं क्या गलत कर रहा हूं।

क्या शुद्ध घोषणात्मक अर्थ में टूलटिप का उपयोग करना संभव है? यदि हां, तो क्या कोई मुझे जेएसफ़िल्ड या बूटप्ले नमूना के माध्यम से दिखा सकता है? मैं वास्तव में इस पर अपने सिर पिटाई कर रहा हूँ।

Answer 1

नहीं, एक शुद्ध घोषणात्मक अर्थ में टूलटिप का उपयोग करना संभव नहीं है। Docs से:

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

तो तुम .tooltip() जावास्क्रिप्ट में मैन्युअल रूप से इस तरह कॉल करना होगा:

$("[data-toggle=tooltip]").tooltip(); 

या उपयोग जो कुछ चयनकर्ता आप चाहते हैं।

Working Demo in jsFiddle

कौन इस तरह दिखना चाहिए:

Answer 2

अपने प्रोजेक्ट में मैं .btn-समूह वर्ग और 3 वर्ग btn साथ 'एक' तत्वों के साथ एक div है। बूटस्ट्रैप आधिकारिक कोड के साथ आरंभ किया जा रहा काम नहीं करता है (मैं Twitter.Bootstrap.less उपयोग कर रहा हूँ, मैं अगर किसी भी diference बनाता है पता नहीं है):

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

तो मैं एक और Stackoverflow पर एक समाधान पाया ImaJedi4ever से उत्तर दिया कि मेरे लिए एक आकर्षण की तरह काम करते हैं, बूटस्ट्रैप टूलटिप प्रारंभ करने में:

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

Answer 3

प्रतिक्रिया और 4 अल्फा बूटस्ट्रैप साथ उल्का में यह दिखाने में कोई समस्या थी। यह एक जादू की तरह काम करता है!

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