बूटस्ट्रैप टूलटिप्स काम नहीं कर रहा है

Question

मैं यहाँ पागल हो रहा हूँ।

मुझे निम्न HTML मिली है:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

और बूटस्ट्रैप शैली टूलटिप केवल एक सामान्य टूलटिप को प्रदर्शित करने से इनकार करती है।

मुझे बूटस्ट्रैप मिल गया है। बस ठीक काम कर रहा हूं, और मैं वहां कक्षाएं देख सकता हूं

मुझे अपनी HTML फ़ाइल के अंत में सभी प्रासंगिक JS फाइलें मिली हैं:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

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

मुझे मॉडल्स और अलर्ट और अन्य चीजें ठीक काम कर रही हैं, इसलिए मैं कुल मोरन नहीं हूं;)

किसी भी मदद के लिए धन्यवाद!

Comments

टूलटिप को एप्लिकेशन में शुरू किया जा रहा है। ट्विस्टर्स उदाहरण में फ़ाइल। क्या आप अपना html पोस्ट कर सकते हैं? आप स्क्रिप्ट को कैसे आरंभ कर रहे हैं, इस पर एक नज़र रखना चाहेंगे।

— एंड्रेस इलिच

अह्ह्ह्ह .... मैंने अनदेखा कर दिया कि पहली टिप्पणी दी। तो यह काम करना चाहिए: code<a href="#" rel="tooltip" title="A अच्छा tooltip" class="tooltip-test"> परीक्षण </a> <br> <स्क्रिप्ट> // टूलटिप डेमो $ (' । .tooltip परीक्षण ') टूलटिप () </ script>

— माइक बार्टलेट

टूलटिप विकल्पों में चयनकर्ता को पास करना न भूलें,$('.tooltip-test').tooltip({ selector: "a" })

— एंड्रेस इलिच

धन्यवाद एंड्रेस वास्तव में मुझे वहां चयनकर्ता की जरूरत नहीं लगती थी, मुझे लगता है कि क्योंकि ए की क्लास को टूलटिप-टेस्ट के रूप में संदर्भित किया जाता है।

— माइक बारलेट

चयनकर्ता विकल्प के बिना टूलटिप मेरे लिए काम नहीं करता है, यहां एक डेमो है जिसे मैंने रखा है: jsfiddle.net/VXctp , इसे चयनकर्ता के बिना आज़माएं।

— एंड्रेस इलिच

Answer 1

योग करने के लिए: jQuery चयनकर्ताओं का उपयोग करके अपने टूलटिप्स को सक्रिय करें

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

वास्तव में, आपको विशेषता चयनकर्ता का उपयोग करने की आवश्यकता नहीं है, आप इसे किसी भी तत्व पर लागू कर सकते हैं, भले ही rel="tooltip"इसके टैग में ऐसा न हो ।

Comments

रेल के साथ काम करने वालों के लिए, यह पहले से ही में परिभाषित किया गया है bootstrap.js.coffeeके साथ $(".tooltip").tooltip()। बस //= require bootstrapअपने में शामिल करना सुनिश्चित करें application.js।

— 12'12

किसी भी तत्व में वर्ग .tooltip जोड़ना मेरे लिए टूलटिप्स को तोड़ देगा। वर्ग .tooltip के साथ तत्व के अंदर की सामग्री छिप जाएगी और अगर मैं अपने माउस के साथ छिपे हुए तत्व को प्रबंधित करने का प्रबंधन करता हूं तो टूलटिप दिखाएगा। किसी अन्य चयनकर्ता या वर्ग के नाम का उपयोग करते हुए कार्य करेंगे \।

— लियोनेल गैलान

@ लिटो जो सही है, बूटस्ट्रैप शैलियों को परिभाषित करता है .tooltipऔर डिफ़ॉल्ट रूप से, वे अदृश्य हैं। आप relचयनकर्ता के रूप में विशेषता या किसी अन्य वर्ग का उपयोग कर सकते हैं , हालांकि।

— मैनुअल एबर्ट

हां, आपको HTML मार्कअप और JS चयनकर्ताओं की आवश्यकता है। ये टूलटिप्स लगाने के वैकल्पिक तरीके नहीं हैं।

— एटीएसम

कुछ एक टूलटिप को मोडल में प्रदर्शित करने की कोशिश कर रहे होंगे और यह सभी बूटस्ट्रैप संस्करणों में काम नहीं करता है। यदि आप इसे सामान्य पृष्ठ में आज़माते हैं, न कि मोडल के रूप में, और यह काम करता है, तो आप जानते हैं कि यह समस्या है।

— mjnissim

Answer 2

उसी समस्या का अनुभव करने के बाद, मैंने पाया कि इस समाधान ने बूटस्ट्रैप आवश्यक विशेषताओं के बाहर अतिरिक्त टैग विशेषताओं को जोड़ने के बिना काम किया।

एचटीएमएल

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

उम्मीद है की यह मदद करेगा!

Comments

धन्यवाद! इसने मेरे लिए काम किया। किसी तरह इस पृष्ठ पर अन्य समाधान मेरे लिए काम नहीं कर रहे थे।

— रोमन

मैं रोमन के साथ हूं। यह समाधान बूटस्वाच सीएसएस वेरिएंट के साथ भी काम करता है।

— डेवसीस

इसने मेरे लिए काम किया। जब तक मैंने यह कोशिश नहीं की, तब तक कुछ नहीं हुआ। धन्यवाद!

— ब्लेकपेटर्सन

इसने मेरे लिए भी काम किया। कोई भी विचार क्यों $ ('[डेटा-टॉगल = "टूलटिप"]'); टूलटिप ({'प्लेसमेंट': 'टॉप'}); काम नहीं करता है?

— जीरोकूल

धन्यवाद, यह मेरे लिए काम किया। बस यह सुनिश्चित करें कि आप <स्क्रिप्ट> टैग्स के बीच कोड डालें जब आप JQuery लाइब्रेरी को लोड करते हैं।

— गेराल्डस्कॉट 13

Answer 3

आपको अलग से सभी js फ़ाइलों की आवश्यकता नहीं है

यदि आप सभी बूटस्ट्रैप फ़ंक्शंस का उपयोग करने जा रहे हैं, तो बस निम्न फ़ाइलों का उपयोग करें:

-bootstrap.css
-bootstrap.js

दोनों को http://twitter.github.com
और अंत में
jquery.js के नवीनतम संस्करण में पाया जा सकता है

---

ग्लिफ़िकन्स के लिए आपको छवि की आवश्यकता होती है

glyphicons-halfings.png और / या glyphicons-halfings-white.png (सफ़ेद रंग के चित्र)
जो आपको अपनी वेबसाइट के अंदर / img / फ़ोल्डर में अपलोड करने की आवश्यकता है (या) इसे जहाँ आप चाहते हैं, लेकिन बूटस्ट्रैप के अंदर फ़ोल्डर निर्देशिका बदलें .css

---

टूलटिप के लिए आपको अपने <head> </head>टैग के अंदर निम्नलिखित स्क्रिप्ट की आवश्यकता होती है

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

बस...

Answer 4

http://getbootstrap.com/javascript/#tooltips-usage

ऑप्ट-इन कार्यक्षमता प्रदर्शन कारणों के लिए, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट-इन हैं, जिसका अर्थ है

आपको उन्हें स्वयं आरंभ करना होगा।

पृष्ठ पर सभी टूलटिप्स को इनिशियलाइज़ करने का एक तरीका यह होगा कि उन्हें उनके डेटा-टॉगल विशेषता द्वारा चुना जाए:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

इस कोड को अपने html में डालने से आप टूलटिप्स का उपयोग कर सकते हैं

उदाहरण:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

Comments

इस ऑप्ट-इन अवधारणा को साझा करने के लिए धन्यवाद! इसे कभी भी किसी ट्यूटोरियल से न पढ़ें।

— dpp

मेरे सभी jquery / बूटस्ट्रैप टूलटिप व्हास का समाधान

— DJ Burb

बशर्ते लिंक गायब है: कृपया getbootstrap.com/docs/4.1/compenders/tooltips

— Guillaume Husta

Answer 5

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन चूंकि मुझे बूटस्ट्रैप की नई रिलीज़ के साथ यह समस्या थी और वेबसाइट पर यह स्पष्ट नहीं है, यहां बताया गया है कि आप टूलटिप को कैसे सक्षम करते हैं।

अपने तत्व को "टूलटिप-टेस्ट" की तरह कक्षा दें

फिर इस कक्षा को अपने जावास्क्रिप्ट टैग में सक्रिय करें:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Comments

यह एकमात्र समाधान था जिसने मेरे लिए काम किया। मैं शीर्षक अपडेट करने के लिए डेटा-मूल-शीर्षक = "{{someAngularJSVar}}" का उपयोग कर रहा हूं और यह त्रुटिपूर्ण रूप से काम कर रहा है।

— WKara

Answer 6

एचटीएमएल

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

यह एक काम है मेरे लिए।

Comments

इस प्रस्ताव ने मेरे लिए भी पूरी तरह से काम किया। मुझे यह पसंद आया क्योंकि यह सरल और सुरुचिपूर्ण है। यह आपको बूटस्ट्रैप मानकों का उपयोग करते रहने देता है जैसे कि डिफ़ॉल्ट रूप से प्लगइन निष्क्रिय हो गया, जैसे ड्रॉपडाउन और टैब तत्वों के साथ होता है। मैंने JS को @Igor द्वारा एक नई फ़ाइल में प्रस्तावित किया और इसे मूल बूटस्ट्रैप .js में शामिल किया

— Iago Rodríguez-Quintana

Answer 7

यदि आप $("[rel='tooltip']").tooltip();अन्य सुझावों के अनुसार सुझाव देते हैं तो आप टूलटिप्स को केवल उन तत्वों पर सक्रिय करेंगे जो वर्तमान में डोम में हैं। इसका मतलब है कि अगर आप DOM को बदलने जा रहे हैं और बाद में डायनामिक कंटेंट डालेंगे तो यह काम नहीं करेगा। इसके अलावा यह बहुत कम कुशल है क्योंकि यह JQuery इवेंट डेलिगेशन का उपयोग करने के लिए अलग-अलग तत्वों के लिए इवेंट हैंडलर स्थापित करता है । इसलिए मैंने बूटस्ट्रैप टूलटिप्स को सक्रिय करने का सबसे अच्छा तरीका कोड की यह एक पंक्ति है जिसे आप तैयार दस्तावेज़ में रख सकते हैं और इसके बारे में भूल सकते हैं:

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

ध्यान दें कि मैं उपयोग कर रहा हूँ titleके बजाय चयनकर्ता के रूप में rel=titleया data-title। यह एक लाभ यह है कि कई अन्य तत्वों के लिए लागू किया जा सकता है ( relहै चाहिए केवल एंकर के लिए होने के लिए) है और यह भी कि यह पुराने ब्राउज़र के लिए "वापस आने 'के रूप में काम करता है।

यह भी ध्यान दें कि data-toggle="tooltip"यदि आपको उपरोक्त कोड का उपयोग करना है तो आपको विशेषता की आवश्यकता नहीं है ।

बूटस्ट्रैप टूलटिप्स महंगे हैं क्योंकि आपको प्रत्येक तत्वों पर माउस घटनाओं को संभालने की आवश्यकता है। यही कारण है कि उन्होंने इसे डिफ़ॉल्ट रूप से सक्षम नहीं किया है। इसलिए यदि आप कभी भी लाइन के ऊपर टिप्पणी करने का निर्णय लेते हैं, तो यदि आप शीर्षक विशेषता का उपयोग करते हैं, तो आपका पृष्ठ अभी भी काम करेगा।

यदि आप शीर्षक विशेषता का उपयोग नहीं करने के लिए ठीक हैं, तो मैं Hint.css जैसे शुद्ध CSS समाधान का उपयोग करने की सलाह दूंगा या http://csstooltip.com की जांच करूंगा, जिसमें किसी भी जावास्क्रिप्ट कोड की आवश्यकता नहीं है।

Comments

मैं इस एक के साथ संघर्ष कर रहा हूं क्योंकि गतिशील पीढ़ी कई स्तरों तक गहरी हो जाती है। Href मान गतिशील रूप से उत्पन्न सामग्री है और परिणामी div id उस आइटम संख्या पर आधारित है जो href मान से मेल खाती है। इसलिए यदि मुझे आइटम प्रकार ए के लिंक का एक पेज मिला है, तो मेरे पास आइटम ए -1, आइटम ए -2, आइटम ए -3 की सूची है, उन लिंक में से प्रत्येक आइटम व्यक्तिगत पेज पर है, लेकिन मैं चाहता हूं होवर पर डायनामिक कंटेंट प्रदर्शित करने के लिए टूलटिप कंटेंट, जिससे उपयोगकर्ता पूर्ण लिंक पर क्लिक करने से पहले आइटम का कुछ विचार प्राप्त कर सकता है।

— मेलानी सुमेर

यह सबसे मददगार था। मेरे पास एक आइकन के साथ बाइंड करने के लिए टूलटिप सेट था, और आइकन लाइब्रेरी में कुछ प्रकार की एसिंक्रोनस लोडिंग थी, इसलिए यह बाध्य नहीं हो सकती थी। यह बहुत अजीब था क्योंकि यह एक वर्ग चयनकर्ता का उपयोग करते समय काम करेगा, लेकिन आईडी नहीं। आपके सहयोग के लिए धन्यवाद!

— निक वुडहम्स

Answer 8

यह सबसे सरल तरीका है। बस इससे पहले डाल </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

टूलटिप्स के बारे में बूटस्ट्रैप के दस्तावेज में दिए गए उदाहरण देखें ।

उदाहरण के लिए:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Comments

कृपया प्रकार की विशेषता को बंद करें ... केवल एक टाइपो का संपादन करना एक PITA है: S

— मोहम्मद अब्दुल मुजीब

Answer 9

टूलटिप और पॉपओवर केवल ड्रॉपडाउन या प्रगतिबार जैसे सीएसएस प्लगइन्स नहीं हैं। टूलटिप्स और पॉपओवर का उपयोग करने के लिए, आपको jquery (जावास्क्रिप्ट पढ़ें) का उपयोग करके उन्हें सक्रिय करना होगा।

तो, हम कहते हैं कि हम एक html बटन के क्लिक पर एक पॉपओवर दिखाना चाहते हैं।

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

फिर आपको पॉपओवर को सक्रिय करने के लिए निम्नलिखित जावास्क्रिप्ट कोड होना चाहिए:

$('.popovers-to-be-activated').popover();

वास्तव में, ऊपर जावास्क्रिप्ट कोड उन सभी HTML तत्वों पर पॉपओवर को सक्रिय करेगा जिनके पास "पॉपओवर-टू-एक्टिव" क्लास है।

यह कहने की आवश्यकता नहीं है कि डोम तैयार होने के साथ ही सभी पॉपओवर को सक्रिय करने के लिए उपर्युक्त जावास्क्रिप्ट को DOM-ready कॉलबैक के अंदर रखें:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

Answer 10

हेड सेक्शन में आपको पहले निम्नलिखित कोड जोड़ने होंगे

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

फिर बॉडी सेक्शन में आपको निम्न कोड लिखना होगा

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Answer 11

यदि सब कुछ अभी भी हल नहीं हुआ है तो नवीनतम जेक्वेरी लाइब्रेरी का उपयोग करें, यदि आपको नवीनतम बूटस्ट्रैप 2.0.4 और jquery-1.7.2.js का उपयोग करने पर आपको किसी भी चयनकर्ता की आवश्यकता नहीं है

महज प्रयोग करें rel="tooltip" title="Your Title" data-placement=" "

अपनी इच्छानुसार डेटा-प्लेसमेंट में शीर्ष / नीचे / बाएं / दाएं का उपयोग करें।

Answer 12

मैंने हेडर में jquery और bootstrap-tooltip.js जोड़े हैं। पाद लेख में इस कोड को जोड़ना मेरे लिए काम करता है! लेकिन जब मैं हेडर में समान कोड जोड़ता हूं तो यह काम नहीं करता है!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Comments

इस मामले में DOM ने अभी तक लोड नहीं किया है इसलिए सभी तत्व पृष्ठ पर मौजूद नहीं हैं। ऊपर का कोड लपेटें$(function() { ... });

— johnml

Answer 13

अगर रेल + हैम का उपयोग करना टूलटिप को शामिल करने के लिए बहुत आसान है, तो बस करें:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

वह तत्व के अंत में केवल निम्नलिखित पंक्ति जोड़ सकता है।

:rel => "tooltip", :title => "Referential Guide"

Comments

वास्तव में उम्मीद कर रहा था कि मेरे लिए काम करने जा रहा था, लेकिन अफसोस यह नहीं किया।

— टर्बोलेडेन

अब मैं रेलों की तुलना में Djanto में अधिक हूं, लेकिन यदि आप अपना कोड पेस्ट करते हैं तो मैं आपको कुछ टिप देने की कोशिश कर सकता हूं।

— एंड्रेस कैले

Answer 14

मेरे विशेष मामले में, यह काम नहीं किया क्योंकि मैं jQuery के दो संस्करणों को शामिल कर रहा था। बूटस्ट्रैप के लिए एक, लेकिन Google चार्ट के लिए एक और (एक अन्य संस्करण)।

जब मैं चार्ट के लिए jQuery लोडिंग को हटाता हूं, तो यह ठीक काम करता है।

Answer 15

मैंने अभी जोड़ा:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

नीचे bootstrap.min.js और यह काम करता है।

Answer 16

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

ध्यान दें:

यदि ये टूलटिप नमूने आपके पेज में डालने पर काम नहीं करते हैं, तो आपको एक और समस्या है। आपको चीजों को देखने की आवश्यकता है जैसे:

• लिपियों का क्रम शामिल किया जा रहा है
• देखें कि क्या आप हटाए गए HTML तत्वों को आरंभ करने का प्रयास कर रहे हैं
• देखें कि क्या आप जेएस फाइलों में उन तरीकों को कॉल करने की कोशिश कर रहे हैं, जिनमें आप शामिल नहीं हैं

• देखें कि क्या आप जेएस फाइल को शामिल कर रहे हैं जो आपको जरूरत की कार्यक्षमता प्रदान करती है (न केवल टूलटिप्स के लिए, बल्कि आपके द्वारा पृष्ठ पर उपयोग किए गए किसी भी घटक)।

  <head>
      <link rel="stylesheet" href="/Content/bootstrap.css" />
      <link rel="stylesheet" href="/Content/animate.css" />
      <link rel="stylesheet" href="/Content/style.css" />
  </head>
  <body>
      ... your HTML code ...
      <script src="/Scripts/jquery-2.1.1.js"></script>
      <script src="/Scripts/bootstrap.min.js"></script>
      <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
      ... your JavaScript initializers ...
  </body>

उपरोक्त मदों में से किसी की भी विफलता (और अक्सर होती है) जावास्क्रिप्ट को लोडिंग और / या चलाने से रोकती है, और यह सब कुछ अच्छा और टूटा हुआ रखता है।

काम कर रहे हैं

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

मूल HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

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

यदि आप HTML तत्व के लिए टूलटिप्स बना रहे हैं, और आप प्लेन बूटस्ट्रैप टूलटिप्स का उपयोग कर रहे हैं, तो आप अपने स्वयं के जावास्क्रिप्ट कोड के साथ टूलटिप इनिशिएटिवर्स को कॉल करने के लिए जिम्मेदार होंगे।

इससे पहले

<span class="badge badge-sm badge-plain">Admin Mode</span>

उपरांत

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

प्रारंभकर्ता

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

बूटस्ट्रैप टेम्पलेट टूलटिप्स (जैसे INSPINIA)

यदि आप बूटस्ट्रैप टेम्पलेट (जैसे INSPINIA) का उपयोग कर रहे हैं, तो आप टेम्पलेट सुविधाओं का समर्थन करने के लिए एक सहायक स्क्रिप्ट शामिल हैं:

    <script src="/Scripts/app/inspinia.js" />

INSPINIA के मामले में, शामिल स्क्रिप्ट स्वचालित रूप से दस्तावेज़ लोड होने पर निम्नलिखित जावास्क्रिप्ट कोड को चलाकर सभी टूलटिप्स को आरंभ करती है:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

इस वजह से, आपको INSPINIA शैली के टूलटिप्स को खुद से प्रारंभ करने की आवश्यकता नहीं है। लेकिन आपको अपने तत्वों को एक विशिष्ट तरीके से प्रारूपित करना होगा। प्रारंभकर्ता विशेषता tooltip-demoमें HTML तत्वों की तलाश करता classहै, फिर tooltip()किसी भी ऐसे बाल तत्व को आरंभीकृत करने की विधि को कहता है जिसमें विशेषता data-toggle="tooltip"परिभाषित हो।

हमारे उदाहरण बिल्ला के लिए, (एक तरह इसके चारों ओर एक बाहरी तत्व जगह <div>या <span>) है class="tooltip-demo", तो जगह data-toggle, data-placementऔर titleतत्व बिल्ला है कि भीतर वास्तविक टूलटिप के लिए गुण। कुछ ऐसा देखने के लिए ऊपर से मूल HTML को संशोधित करें:

इससे पहले

<span class="badge badge-sm badge-plain">Admin Mode</span>

उपरांत

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

प्रारंभकर्ता

None

ध्यान दें कि तत्व के भीतर किसी भी बाल तत्वों <span class="tooltip-demo">को उनके टूलटिप को ठीक से तैयार किया जाएगा। मेरे पास तीन बच्चे तत्व हो सकते हैं, सभी को टूलटिप्स की आवश्यकता होती है, और उन्हें एक कंटेनर के भीतर रखें।

एकाधिक आइटम, टूलटिप के साथ प्रत्येक

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

इसके लिए सबसे अच्छा उपयोग class="tooltip-demo"एक <td>या सबसे बाहरी <div>या में जोड़ना होगा <span>।

टेम्पलेट का उपयोग करते समय प्लेन बूटस्ट्रैप टूलटिप्स

यदि आप INSPINIA का उपयोग कर रहे हैं, लेकिन आप टूलटिप्स बनाने के लिए अतिरिक्त बाहरी <div>या <span>टैग नहीं जोड़ना चाहते हैं , तो आप टेम्पलेट के साथ हस्तक्षेप किए बिना मानक बूटस्ट्रैप टूलटिप्स का उपयोग कर सकते हैं। इस मामले में, आप टूलटिप्स को स्वयं शुरू करने के लिए जिम्मेदार होंगे। हालाँकि, आपको classअपने टूलटिप आइटम की पहचान करने के लिए विशेषता में एक कस्टम मूल्य का उपयोग करना चाहिए । यह आपके टूलटिप इनिशियलाइज़र को INSPINIA से प्रभावित तत्वों के साथ हस्तक्षेप करने से रखेगा। हमारे उदाहरण में, आइए उपयोग करें standalone-tt:

इससे पहले

<span class="badge badge-sm badge-plain">Admin Mode</span>

उपरांत

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

प्रारंभकर्ता

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

Answer 17

यदि आप अपना html बना रहे हैं जिसमें जावास्क्रिप्ट के साथ टूलटिप है, और फिर इसे दस्तावेज़ में सम्मिलित करना है, तो आपको दस्तावेज़ में HTML सम्मिलित करने के लिए पॉपओवर / टूलटिप को सक्रिय करना होगा, दस्तावेज़ लोड पर नहीं ...

Answer 18

Html के बाद आपको टूलटिप जावास्क्रिप्ट को रखना होगा । इस तरह :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script> 

या $ का उपयोग करें (दस्तावेज़)। पहले से ही:

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

टूलटिप काम नहीं कर रहा है क्योंकि आपने टूलटिप html को जावास्क्रिप्ट से पहले रखा है , इसलिए वे नहीं जानते कि टूलटिप के लिए कोई जावास्क्रिप्ट है या नहीं। मेरी राय में, स्क्रिप्ट ऊपर से नीचे तक पढ़ी जाती है।

Answer 19

मेरे पास एक समान मुद्दा था और खासकर यदि आप एक बटन कंटेनर में एक ऊर्ध्वाधर बटन कंटेनर की तरह चल रहे हैं। उस स्थिति में आपको कंटेनर को 'बॉडी' के रूप में सेट करना होगा

I have added a jsfiddle example

उदाहरण

Answer 20

दस्तावेज़ के अंदर अपना कोड तैयार रखें

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

मेरे मामले में मुझे http://twitter.github.com/bootstrap/assets/css/bootstrap.css पर टूलटिप सीएसएस कक्षाएं भी याद आ रही थीं। थीं, इसलिए इसे मत भूलना।

Answer 21

बूटस्ट्रैप डॉक्स सेटूलटिप्स पर

टूलटिप्स प्रदर्शन कारणों के लिए ऑप्ट-इन हैं, इसलिए आपको उन्हें स्वयं प्रारंभ करना होगा। पेज पर सभी टूलटिप्स को इनिशियलाइज़ करने का एक तरीका यह होगा कि उन्हें उनके डेटा द्वारा चुनें- टॉगल विशेषता:

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

Answer 22

data-toggle="tooltip"टूलटिप के साथ जो भी तत्व आप चाहते हैं, उस पर जोड़ें ।

Answer 23

आपको निम्नलिखित करने की आवश्यकता है। जोड़ें

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

आपके पृष्ठ पर कहीं कोड (अधिमानतः <head>अनुभाग में)।

इसके साथ data-toggle: "tooltip"जो भी आप सक्षम करना चाहते हैं उसे भी जोड़ें ।

Answer 24

आप Popper.js का उपयोग कर सकते हैं

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

और टूलटिप फ़ंक्शन को कॉल करें:

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

Answer 25

बूटस्ट्रैप टूलटिप प्लगइन का त्वरित और हल्का विकल्प:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

सीएसएस:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JScript:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
}); 

लेबल / पाठ को "mytooltip" श्रेणी के आवरण में संलग्न किया जाना चाहिए। इस आवरण में एक Id होनी चाहिए।

लेबल के बाद कक्षा "mytooltiptext" और आईडी में माता-पिता के आवरण की आईडी से युक्त टूल टिप टेक्स्ट होता है, जिसमें माता-पिता का आईडी + "_tttext" होता है। चयनकर्ताओं के लिए अन्य विकल्पों का उपयोग किया जा सकता है।

आशा करता हूँ की ये काम करेगा।