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

Question

के साथ टूलटिप्स मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं - और मैं फ्रंटेंड डेवलपर नहीं हूं! हालांकि, यह लगभग प्रक्रिया कर रहा है - मैं कहता हूं - मज़ा!

मैं टूलटिप्स के बारे में थोड़ा उलझन में हूं। वे covered in the documentation हैं लेकिन ट्विटर कुछ ज्ञान मानते हैं। उदाहरण के लिए, वे टूलटिप को निम्न जावास्क्रिप्ट कोड से ट्रिगर करने के लिए कहते हैं।

$('#example').tooltip(options) 

उनके स्रोत के आसपास poking के बाद, मुझे एहसास हुआ कि टूलटिप्स साथ खेतों एक कक्षा में होने की जरूरत है और निम्नलिखित कोड चलाने की है।

$('.tooltipclass').tooltip(options) 

लेकिन अब मेरे सवाल है, क्यों ट्विटर बूटस्ट्रैप इस तरह के एक वर्ग tooltip प्रदान नहीं करता है? बस अधिक विन्यास की अनुमति देने के लिए? क्या टूलटिप्स के साथ व्यक्तिगत तत्वों को tooltipclass पर जोड़ना बेहतर है, या क्या मुझे आसपास के क्षेत्र को tooltipclass पर जोड़ना चाहिए? क्या इससे कोई फर्क पड़ता है कि मैं नाम पहचानकर्ता (#name) के बजाय कक्षा पहचानकर्ता (.class) का उपयोग करता हूं?

Answer 1

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

$('.link').tooltip() 

:

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a> 

तो फिर तुम .link वर्ग तो जैसे टूलटिप्स रूप में संलग्न है सभी लिंक ट्रिगर कर सकते हैं

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

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

और अपने लिंक कुछ इस तरह दिखाई देगा:

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a> 

बेशक

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

$('#example').tooltip({ 
    selector: "a[rel=tooltip]" 
}) 

यह चयनकर्ता आपके विशेषता के साथ आपके सभी टूलटिप्स को आपके #example div "के भीतर" लक्षित करेगा, इस तरह आप अकेले उस अनुभाग में विशेष शैलियों या विकल्प जोड़ सकते हैं। संक्षेप में, आप अपने टूलटिप्स को लक्षित करने के लिए किसी भी वैध चयनकर्ता का अधिक उपयोग कर सकते हैं और उन्हें लक्षित करने के लिए अतिरिक्त मार्क के साथ अपने मार्कअप को गंदे करने की आवश्यकता नहीं है।

Answer 2

ऐसा इसलिए है क्योंकि इन चीजों (मेरा मतलब टूलटिप आदि) jQuery प्लग-इन हैं। और हाँ, वे jQuery के बारे में कुछ बुनियादी ज्ञान मानते हैं। मैं आपको jQuery के बारे में कम से कम एक बुनियादी ट्यूटोरियल देखने के लिए सुझाव दूंगा।

आपको हमेशा यह निर्धारित करना होगा कि कौन से तत्वों में टूलटिप होना चाहिए। और मुझे समझ में नहीं आता कि बूटस्ट्रैप को कक्षा क्यों प्रदान करनी चाहिए, आप उन वर्गों या स्वयं को परिभाषित करते हैं। शायद आप उम्मीद कर रहे थे कि बूटस्ट्रैप स्वचालित रूप से कुछ जादू करता है? हालांकि, यह जादू भी कई समस्याओं का कारण बन सकता है (अवांछित साइड इफेक्ट्स)।

यह जादू आसानी से $(".myclass").tooltip() लिखने के लिए प्राप्त किया जा सकता है, कोड की यह पंक्ति सटीक है जो आप चाहते हैं। आपको केवल एक चीज है जो Myclass क्लास को उन तत्वों से जोड़ती है जिन्हें टूलटिप चीज़ को लागू करने की आवश्यकता होती है। (बस सुनिश्चित करें कि आपके डोम लोड किया गया है के बाद आप कोड की है कि लाइन को चलाने बनाने के नीचे देखें।।)

$(document).ready(function() { 
    $(".myclass").tooltip(); 
}); 

संपादित करें: जाहिरा तौर पर आप वर्ग टूलटिप (शायद इसलिए कि इसे कहीं आंतरिक रूप से प्रयोग किया जाता है का उपयोग नहीं कर सकते हैं!)।

मैं बस सोच रहा हूं कि बूटस्ट्रैप आपके द्वारा निर्दिष्ट कुछ वर्ग के साथ निर्दिष्ट कोड क्यों नहीं चलाता है।

जो चीज आप चाहते हैं वह लगभग उसी कोड का उत्पादन करती है जैसा आपको अभी करना है। सबसे बड़ा कारण हालांकि उन्होंने ऐसा नहीं किया, क्योंकि यह बहुत परेशानी का कारण बनता है। एक व्यक्ति इसे आईडी के साथ तत्व में असाइन करना चाहता है; अन्य इसे निर्दिष्ट वर्गनाम वाले तत्वों को असाइन करना चाहते हैं; और फिर अन्य कुछ चयन प्रक्रिया के माध्यम से प्राप्त एक निर्दिष्ट तत्व को असाइन करना चाहते हैं। वे 3 विकल्प अतिरिक्त जटिलता का कारण बनते हैं, जबकि यह पहले ही jQuery द्वारा प्रदान किया जाता है। मैंने कई प्लगइन्स नहीं देखे हैं जो आप चाहते हैं (सिर्फ इसलिए कि यह अनावश्यक है; यह वास्तव में आपको कोड नहीं बचाता है)।

Answer 3

इस का उपयोग करने के लिए सबसे आसान तरीका

शीर्षक में इस डाल है:

<script> 
    $(function ($) { 
     $("a").tooltip() 
    }); 
</script> 

और फिर

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text"> 
    My link text 
</a> 

ताकि साथ

कोड जे एस अगर आप किसी भी जहां में टैग है आपके rel="tooltip" के साथ पृष्ठ बूटस्ट्रैप टूलटिप प्राप्त करें।

शुभकामनाएं।

Answer 4

मैं जे एस और सीएसएस फ़ाइल शामिल और सोच क्यों यह काम नहीं कर रहा था, क्या किया यह काम था जब मैं <head> में निम्नलिखित कहा:

<script> 
jQuery(function ($) { 
    $("a").tooltip() 
}); 
</script> 

Answer 5

आपके शीर्षक में इस जोड़े

<script> 
    //tooltip 
    $(function() { 
     var tooltips = $("[title]").tooltip(); 
     $(document)(function() { 
      tooltips.tooltip("open"); 
     }); 
    }); 
</script> 

तो बस किसी भी तत्व

Answer 6

इस के सरल उपयोग करने के लिए विशेषता title="your tooltip" जोड़ें:

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip"> 
    tooltip 
</a> 

jQuery का उपयोग करना:

$(document).ready(function(){ 
    $('#mytooltip').tooltip(); 
}); 

आप छोड़ दिया टूलटिप के पक्ष यू सरल जोड़ सकते हैं कर सकते हैं this->data-placement="left"

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a> 

Answer 7

आप सभी डेटा-टॉगल निशान ...

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

http://jsfiddle.net/Amged/xUQ6D/19/