Bootstrap 3.0 Popovers และคำแนะนำเครื่องมือ

Question 1

ฉันเพิ่งเริ่มใช้ Bootstrap และฉันมีปัญหาในการทำให้ฟีเจอร์ป๊อปโอเวอร์และคำแนะนำเครื่องมือใช้งานได้ ฉันไม่มีปัญหากับดรอปดาวน์และโมเดล แต่ดูเหมือนว่าฉันจะขาดบางอย่างสำหรับป๊อปโอเวอร์และคำแนะนำเครื่องมือ

ฉันได้รับคำแนะนำเครื่องมือเพื่อแสดง แต่ไม่ได้มีสไตล์และอยู่เหมือนตัวอย่าง bootstrap และป๊อปโอเวอร์ไม่ทำงานเลย

โปรดตรวจสอบและแจ้งให้เราทราบว่าฉันขาดอะไร

       <!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 ที่นี่

การใช้เคล็ดลับของ Evan คุณสามารถสร้างคำแนะนำเครื่องมือทั้งหมดด้วยโค้ดบรรทัดเดียว:

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

คุณจะเห็นว่าคำแนะนำเครื่องมือทั้งหมดในย่อหน้ายาวของคุณมีคำแนะนำเครื่องมือที่ใช้งานได้เพียงบรรทัดเดียว

ในตัวอย่าง jsFiddle (ลิงก์ด้านบน) ฉันยังได้เพิ่มสถานการณ์ที่คำแนะนำเครื่องมือหนึ่ง (โดยปุ่มลงชื่อเข้าใช้) เปิดอยู่ตามค่าเริ่มต้น นอกจากนี้รหัสคำแนะนำเครื่องมือจะถูกเพิ่มลงในปุ่มใน jQuery ไม่ใช่ในมาร์กอัป HTML

popovers ทำทำงานเช่นเดียวกับคำแนะนำนี้:

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

และคุณมีมัน! ประสบความสำเร็จในที่สุด

ปัญหาที่ใหญ่ที่สุดอย่างหนึ่งในการค้นหาสิ่งนี้คือการทำให้ bootstrap ทำงานกับ jsFiddle ... นี่คือสิ่งที่คุณต้องทำ:

รับข้อมูลอ้างอิงสำหรับ Twitter Bootstrap CDN จากที่นี่: http://www.bootstrapcdn.com/
วางแต่ละลิงก์ลงในแผ่นจดบันทึกและตัด ALL ยกเว้น 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: สั้นและเรียบง่าย

ตรวจสอบ - JS Fiddle

HTML

<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>

Javascript

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

Question 5

ฉันต้องทำบน DOM ให้พร้อม

$( 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 UI
Bootstrap

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>

โปรดทราบว่าฉันใช้คลาสของคุณ "btn-danger" คุณสามารถสร้างคลาสอื่นหรือใช้id="someidthatimakeup"ไฟล์.

Question 8

คุณเพียงแค่ต้องเปิดใช้งานคำแนะนำเครื่องมือ:

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

Question 9

หากคุณใช้ Rails และ ActiveAdmin นี่จะเป็นปัญหาของคุณ: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 โดยพื้นฐานแล้วจะขัดแย้งกับ active_admin.js

นี่คือวิธีแก้ปัญหา: https://stackoverflow.com/a/11745446/264084 (คำตอบของคาเรน) tldr: ย้ายสินทรัพย์ active_admin ไปยังไดเร็กทอรี "vendor"