jQueryUI टूलटिप्स ट्विटर बूटस्ट्रैप के साथ प्रतिस्पर्धा कर रहे हैं

Question

मैं निम्नलिखित कोड के साथ अंत में काम करने के लिए कुछ टूल युक्तियां प्राप्त करने में सक्षम हूं :

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

और फिर

<script>
    $('[rel=tooltip]').tooltip();
</script>

जो समस्या मैं चला रहा हूं, वह यह है कि यह बूटस्टैप के बजाय jQueryUI टूलटिप्स (कोई तीर, बड़ा बदसूरत टूलटिप्स) का उपयोग कर रहा है।

JQueryUI के बजाय बूटस्ट्रैप टूलटिप्स का उपयोग करने के लिए मुझे क्या करने की आवश्यकता है?

Comments

क्या आपको दोनों चीजें चाहिए?

— मैट

नहीं ... मैं बस बूटस्ट्रैप टूलटिप्स रखना चाहूंगा।

— markdotnet

क्षमा करें, मेरा मतलब है कि आपको jquery ui और बूटस्ट्रैप की आवश्यकता है?

— मैट

इसने मेरे लिए काम किया, इस उत्तर की

— पोंचो

@markdotnet: गलत। बूटस्ट्रैप को JQuery.UI की नहीं , बल्कि कोर JQuery लाइब्रेरी की आवश्यकता है ।

— इयान केम्प

Answer 1

tooltipप्लगइन के नाम के लिए jQuery UI और बूटस्ट्रैप दोनों का उपयोग किया जाता है। $.widget.bridgeJQuery यूआई संस्करण के लिए एक अलग नाम बनाने के लिए उपयोग करें और बूटस्ट्रैप प्लगइन को नामित टूलटिप रहने की अनुमति दें ( noConflictबूटस्ट्रैप विजेट पर विकल्प का उपयोग करने की कोशिश करने से बहुत सारी त्रुटियां होती हैं क्योंकि यह ठीक से काम नहीं करता है; यह मुद्दा यहां बताया गया है ; ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

तो यह काम करने के लिए कोड:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

अच्छा कॉपी पेस्ट कोड जो बटन संघर्ष को भी हैंडल करता है:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Comments

जब मैं यह कोशिश करता हूं तो मुझे js त्रुटि मिलती है। 'undefined' is not an object (evaluating '$.widget.bridge')

— कोवार्ड

covar - क्या आपने यह सुनिश्चित किया है कि आपको सभी src स्क्रिप्ट आयात की गई हैं? और क्या आप लिबास के नए संस्करणों का उपयोग कर रहे हैं?

— डेमज़

@ कोवर्ड: यह महत्वपूर्ण है कि आप पहले jquery-ui आयात करें, फिर bridgeबात करें, और फिर बूटस्ट्रैप आयात करें।

— जोशुआ मुइम

एक समाधान है जो एक दर्द है अगर आपके पास सब कुछ बंडल और छोटा है .. तो इस स्क्रिप्ट को किसी भी तरह से इनबेटीवन में डालने का कोई तरीका नहीं है .. डैमिट, नाम टकराव बकवास।

— पायोत्र कुला

यदि आप minified कोड के साथ वेबपैक बंडलों का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप से पहले jquery-ui डाल सकते हैं। जेएस

— राज

Answer 2

एक सरल समाधान है jquery-ui.js के बाद bootrap.js को लोड करना, ताकि बूटस्ट्रैप .tooltip विधि पूर्वता ले।

Comments

यह मेरे लिए काम करता है और सबसे आसान तरीका है। मैं एक HTML टिप्पणी जोड़ने की सलाह देता हूं जिसमें कहा गया है कि एक पुस्तकालय को एक के बाद एक लोड करना होगा।

— पॉल

एक दिन आपको इस तरह के दृष्टिकोण का उपयोग करके संवादों में क्लोज़-आइकन याद आ जाएंगे। stackoverflow.com/questions/17367736/…

— Oleksii Kyslytsyn

यह समाधान मेरे लिए काम नहीं किया। Chrome का उपयोग करते हुए, मैं पृष्ठ को "कैश और हार्ड रिफ्रेश" स्पष्ट कर दूंगा और टूलटिप कभी-कभी काम करेगा और फिर कभी-कभी नहीं (कंसोल में कोई त्रुटि नहीं होगी)। 30 बार रिफ्रेश करने से 7 बार वर्किंग रिजल्ट आया। मैंने तब जाकर एक अनुकूलित jQuery UI पैकेज डाउनलोड किया और अब जब मैंने 30 बार "कैश और हार्ड रिफ्रेश" किया, तो मुझे 0 त्रुटियों के साथ 30 बार काम करने के परिणाम मिले। मैं यह भी जोड़ूंगा कि मैं आवश्यकता का उपयोग कर रहा हूं। इसलिए मैं आसानी से उस ऑर्डर को नियंत्रित कर सकता हूं जिसमें पुस्तकालय लोड किए गए हैं।

— HPWD

आई लव यू यू फॉर

— मिलिंद

Answer 3

यह मेरे लिए काम किया:

यदि आपको JQuery-UI का उपयोग करने की आवश्यकता है, लेकिन आप बूटस्ट्रैप के टूलटिप का उपयोग करना चाहते हैं, तो बस इस वेबसाइट से JQuery-UI का एक अनुकूलित संस्करण प्राप्त करें ।

बस "टूलटिप" विकल्प को अनचेक करें, और इसे डाउनलोड करें (यह "jquery-ui-1.10.4.custom.js" जैसा कुछ होगा)।

बस उस प्रोजेक्ट के साथ जोड़ें जिसे आप वर्तमान में अभी उपयोग कर रहे हैं और आप पार्टी के लिए तैयार हैं। यह संघर्ष से बचना होगा। यह मेरे लिए एक आकर्षण की तरह काम करता था!

Comments

तो आप अभी भी प्रत्येक उपकरण से प्रत्येक हाथ से संपत्ति फ़ाइलों को डाउनलोड करने के बजाय बोवर जैसे उपकरण का उपयोग करते हैं? आप सामान्य रूप से थर्ड पार्टी लाइब्रेरी कैसे स्थापित करते हैं? Google में खोजें और इसे किसी भी साइट से डाउनलोड करें?

— user3746259

कैसे के बारे में मैं बूटस्ट्रैप टूलटिप का उपयोग नहीं करना चाहता, लेकिन यूआई एक के बजाय .. वे इस मुद्दे को किसी भी तरह से पैदा कर रहे हैं।

— पियोट्र कुला

सरल, आसान, मेरी स्थिति के लिए महान काम किया। धन्यवाद! +1

— क्रिस केम्पेन

मेरे लिए काम किया - वास्तव में इस पर मेरा सिर पीट रहा है - प्लस एक - धन्यवाद

— gchq

सबसे उचित उत्तर, जब तक यह केवल आवश्यक कार्यक्षमता लेने का सुझाव देता है। धन्यवाद

— बजे ओलेक्सी किस्लीत्सिन

Answer 4

मामले में आप लोड करना होगा jquery-ui.jsके बाद bootstrap.jsयहाँ इसे कैसे करना है:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

यह jquery-ui के टूलटिप को ओवरराइड करेगा और हमेशा बूटस्ट्रैप का उपयोग करेगा।

Comments

आपके समाधान में ui टूलटिप को बूटस्ट्रैप के साथ अधिलेखित कर दिया जाएगा, लेकिन यदि कोई भी निकाय अधिलेखित नहीं करना चाहता है तो उसे पिछले समाधान का उपयोग करना होगा

— प्रोजेश पाल

एक दिन आपको इस तरह के दृष्टिकोण का उपयोग करके संवादों में क्लोज़-आइकन याद आ जाएंगे। stackoverflow.com/questions/17367736/…

— Oleksii Kyslytsyn

महान समाधान!

— इवान फेरर

Answer 5

यह मानते हुए कि UI को बूटस्ट्रैप इनिशियलाइज़ होने के बाद कहा जाएगा

UI प्रारंभ होने से ठीक पहले बूटस्ट्रैप फ़ंक्शन को स्टोर करें

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

फिर इसे निम्नानुसार कॉल करें

$('.targetClass').bstooltip();

Comments

आधिकारिक तरीका $.fn.bstooltip = $.fn.tooltip.noConflict();

— इगोर जेरोस्सिमी

Answer 6

यह समाधान मेरे लिए अच्छा काम करता है।

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Answer 7

इसके बजाय बस बूटस्ट्रैप पॉपओवर का उपयोग कैसे करें? बीएस पॉपओवर समान संघर्ष नहीं बनाते हैं, हालांकि उन्हें उसी टूलटिप.जेएस घटक की आवश्यकता होती है। हां, वे अधिक स्टाइल वाले हैं, लेकिन मेरे JQuery UI बटन को विनकी होने का कारण नहीं बनाते हैं।

मैं केवल कस्टम स्वतः पूर्ण / comboboxes के लिए Jquery UI का उपयोग कर रहा हूं (इसलिए अन्य JQ-UI नियंत्रण ठीक नहीं हो सकते हैं) और उपरोक्त में से कोई भी BS टूलटिप्स के साथ "अनस्टाइल" हो रहे कॉम्बोक्स बटन पर CSS समस्या को ठीक करने के लिए काम नहीं कर रहा है। बीएस पॉवर्स पर स्विच करना अनिवार्य रूप से समान प्रभाव प्रदान करता है जिसमें कोई संघर्ष नहीं, मेरे स्क्रिप्ट आयात का कोई पुन: निर्धारण नहीं है, और कोई स्पष्ट पुल बयानों की आवश्यकता नहीं है।

Comments

इस तरह, बहुत ही व्यावहारिक

— मार्क स्ट्रैटमैन

टिप के लिए धन्यवाद, मैं सहमत हूं, यह एक ऐसा समाधान है जो सभी जटिलता से बचा जाता है।

— टॉम

जा यार, एक डिस ने सभी बुरे सपने खत्म कर दिए और एक नींबू की तरह चमक रहा है!

— पियोट्र कुला

क्या पॉपओवर को प्री-रेक के रूप में टूलटिप की आवश्यकता नहीं है?

— श्रीकयबाशी

Answer 8

jQuery.noConflict () का उपयोग करके देखें और देखें कि क्या यह आपकी मदद करता है। ऐसा लगता है कि बूटस्ट्रैप और jQuery समान नामस्थान का उपयोग कर रहे हैं, और शायद बूटस्ट्रैप और jQuery टूलटिप्स समान फ़ंक्शन में लोड हो जाते हैं, या पहले लोड हो जाता है।

आप यह देखने के लिए भी देख सकते हैं कि कौन सी लाइब्रेरी पहले भरी हुई है। आमतौर पर यदि आप एक ही फ़ंक्शन को दो बार जावास्क्रिप्ट में घोषित करते हैं तो दूसरा वह है जिसका उपयोग किया जाता है।

तीसरा, jQueryUI पैकेज ( उनकी वेबसाइट पर) देखें और देखें कि क्या आप ऐसा संस्करण डाउनलोड कर सकते हैं जिसमें टूलटिप्स शामिल नहीं हैं (मैंने जाँच की और यह पूरी तरह से संभव है)।

Comments

तो यह अजीब है ... मैं एक ही क्रम में जावास्क्रिप्ट पुस्तकालयों को लोड कर रहा हूं लेकिन जब मुझे समस्या हो रही थी, तो मैं अपने सभी <सामग्री> टैग और बूटस्ट्रैप.जेएस से पहले jquery-ui पुस्तकालय लोड कर रहा था। मैंने अपनी सामग्री के ऊपर bootstrap.js को स्थानांतरित कर दिया (लेकिन अभी भी jquery-ui.js के बाद) और अब यह टूलटिप्स प्रदान कर रहा है जैसे मुझे उम्मीद थी। मुझे आशा है कि यह मेरी वेबसाइट के ब्रह्मांड को गड़बड़ नहीं करेगा। मुझे लगा कि प्रदर्शन कारणों के लिए सामग्री के बाद आप जावास्क्रिप्ट लोड करने के लिए सबसे अच्छा अभ्यास था ... अजीब।

— markdotnet

यह सबसे अच्छा अभ्यास है। शायद बूटस्ट्रैप को शीर्ष पर होना चाहिए?

— मैट

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

— पॉल फिलिप्स

Answer 9

एक आसान और अच्छा उपाय है, बस अपने बूटस्ट्रैप और jquery ui फ़ाइल लिंक को इस तरह से पुनर्व्यवस्थित करें:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

बूस्टस्ट्रैप जेएस फ़ाइल लोड करने से पहले बस jQueryui लोड करें। यह मेरे लिए काम है।

Comments

एक दिन आपको इस तरह के दृष्टिकोण का उपयोग करके संवादों में क्लोज़-आइकन याद आ जाएंगे। stackoverflow.com/questions/17367736/…

— Oleksii Kyslytsyn

यह बूटस्ट्रैप मिनट के साथ ui के सभी सामान्य गुणों को

— उखाड़ फेंकेगा और

Answer 10

एक आसान तरीका है jquery-ui.js के बाद bootstrap.js को लोड करना, ताकि बूटस्ट्रैप .tooltip jquery UI का ओवरराइड कर दे। यदि आप आवश्यकता की तरह एक मॉड्यूल लोडर का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप को jquery-ui पर निर्भर कर सकते हैं, जैसे:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...