बूटस्ट्रैप 3.0 पॉपओवर और टूलटिप्स

Question 1

मैं बूटस्ट्रैप के लिए नया हूं और मुझे काम करने के लिए पॉपओवर और टूलटिप फीचर्स मिलने में परेशानी हो रही है। मुझे ड्रॉप डाउन और मॉडल के साथ कोई समस्या नहीं थी लेकिन मुझे लगता है कि पॉपओवर और टूलटिप्स के लिए कुछ याद आ रहा है।

मुझे दिखाने के लिए टूलटिप्स मिल रहे हैं, लेकिन वे स्टाइलस्ट्रैप नहीं हैं और बूटस्ट्रैप उदाहरणों की तरह स्थित हैं। और पॉपओवर काम नहीं कर रहा है।

कृपया नज़र डालें और मुझे बताएं कि मैं क्या याद कर रहा हूं।

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>

Question 2

यह बताता है कि इवान लार्सन के पास सबसे अच्छा जवाब है । कृपया उसके उत्तर को बढ़ाएँ (और / या उसे सही उत्तर के रूप में चुनें) - यह शानदार है।

काम jsFiddle यहाँ

इवान की चाल का उपयोग करके, आप एक कोड की एक पंक्ति के साथ सभी टूलटिप्स को इंस्टेंट कर सकते हैं:

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

आप देखेंगे कि आपके लंबे पैराग्राफ के सभी टूलटिप्स में केवल एक लाइन के साथ काम करने वाले टूलटिप्स हैं।

JsFiddle उदाहरण (ऊपर लिंक) में, मैंने एक स्थिति भी जोड़ी है जहां एक टूलटिप (साइन-इन बटन द्वारा) डिफ़ॉल्ट रूप से चालू है। इसके अलावा, टूलटिप कोड को jQuery में बटन पर जोड़ा जाता है, HTML मार्कअप में नहीं।

R आर करना टूलटिप्स के रूप में ही काम करते हैं:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

आखिर तुमने इसे हासिल कर ही लिया है! अंत में सफलता।

इस सामान का पता लगाने में सबसे बड़ी समस्याओं में से एक jsFiddle के साथ बूटस्ट्रैप काम कर रहा था ... यहाँ आपको क्या करना चाहिए:

यहाँ से ट्विटर बूटस्ट्रैप सीडीएन का संदर्भ लें: http://www.bootstrapcdn.com/
प्रत्येक लिंक को नोटपैड में पेस्ट करें और URL को छोड़कर सभी को अलग करें। उदाहरण के लिए:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
JsFiddle में, बाईं ओर, बाहरी संसाधन अकॉर्डियन ड्रॉपडाउन खोलें
प्रत्येक URL में पेस्ट करें, प्रत्येक पेस्ट के बाद प्लस चिह्न दबाएं
अब, "फ्रेमवर्क एंड एक्सटेंशन्स" को अकॉर्डियन ड्रॉपडाउन खोलें, और jQuery 1.9.1 (या जो भी ...) चुनें

अब आप जाने के लिए तैयार हैं।

Question 3

मैं टूलटिप को सक्षम करने के लिए अपने सभी पृष्ठों पर इसका उपयोग करता हूं

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

Question 4

BOOTSTRAP 3 के साथ काम करना: छोटा और सरल

जांच - जेएस फिडल

एचटीएमएल

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

जावास्क्रिप्ट

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

Question 5

मुझे यह डोम तैयार पर करना था

$( document ).ready(function () { // this has to be done after the document has been rendered
    $("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        'placement': 'top',
        'show': true
    });
});

और होने के लिए मेरे लोड ऑर्डर बदलें:

jQuery
jQuery यूआई
बूटस्ट्रैप

Question 6

किसी कारण से मैं काम करने के लिए अपने कोड को प्राप्त करने में सक्षम था, कुछ चीजों को स्विच करके। यदि आपके लिए अब तक कुछ भी काम नहीं किया गया है, तो कृपया इस पर ध्यान दें:

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});

Question 7

आपको अपनी स्क्रिप्ट में एक सिंटैक्स त्रुटि है और, जैसा कि xXPhenom22Xx द्वारा नोट किया गया है, आपको टूलटिप को तुरंत हटाना होगा।

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

ध्यान दें कि मैंने आपकी कक्षा "बीटीएन-डेंजर" का उपयोग किया है। आप एक अलग वर्ग बना सकते हैं, या एक का उपयोग कर सकते हैं id="someidthatimakeup"।

Question 8

आपको बस टूलटिप को सक्षम करने की आवश्यकता है:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Question 9

यदि आप रेल और ActiveAdmin का उपयोग कर रहे हैं, तो यह आपकी समस्या होने जा रही है: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 असल में, active_admin.js के साथ संघर्ष

यह समाधान है: https://stackoverflow.com/a/11745446/264084 (करेन का जवाब) tldr: "विक्रेता" निर्देशिका में active_admin संपत्तियों को ले जाएँ।