Bootstrap 3.0 Popovers và chú giải công cụ


84

Tôi mới sử dụng Bootstrap và tôi đang gặp sự cố khi làm việc với các tính năng cửa sổ bật lên và chú giải công cụ. Tôi không gặp vấn đề gì với phần thả xuống và các mô hình nhưng dường như tôi thiếu thứ gì đó cho cửa sổ bật lên và chú giải công cụ.

Tôi đang nhận được các chú giải công cụ để hiển thị nhưng chúng không được tạo kiểu và định vị giống như các ví dụ về bootstrap. Và cửa sổ bật lên không hoạt động chút nào.

Xin hãy xem và cho tôi biết những gì tôi đang thiếu.

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

Tôi vừa đăng câu hỏi tương tự cách đây vài phút, cũng đang sử dụng BS3 với mọi thứ khác hoạt động như Chế độ và Tab nhưng không có Chú giải công cụ hoặc Cửa sổ bật lên ... sẽ cập nhật cho bạn nếu tôi tìm thấy thứ gì đó.
xXPhenom22Xx

cho popover, tùy chọn không được định nghĩa
Cybermaxs

Hiện tại, tôi chỉ đang cố gắng lấy hành vi mặc định nhưng tôi quan tâm đến việc làm cho nó hiển thị khi di chuột thay vì nhấp chuột nhưng đó là lần tiếp theo. Tôi vẫn cần đặt một cái gì đó cho các tùy chọn?
user2560895

Đoạn mã trên là những gì tôi hiện đang sử dụng và nó vẫn không hoạt động. Bất kỳ đề xuất? Tôi có thứ gì không đúng thứ tự hay cái gì đó không?
dùng2560895

Câu trả lời:


147

Hóa ra Evan Larsen là người có câu trả lời tốt nhất . Vui lòng ủng hộ câu trả lời của anh ấy (và / hoặc chọn nó là câu trả lời đúng) - thật tuyệt vời.

Làm việc jsFiddle tại đây

Sử dụng thủ thuật của Evan, bạn có thể khởi tạo tất cả các chú giải công cụ bằng một dòng mã:

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

Bạn sẽ thấy rằng tất cả các chú giải công cụ trong đoạn văn dài của mình đều có chú giải công cụ hoạt động chỉ với một dòng đó.

Trong ví dụ jsFiddle (liên kết ở trên), tôi cũng đã thêm một tình huống trong đó một chú giải công cụ (bằng nút Đăng nhập) được BẬT theo mặc định. Ngoài ra, mã chú giải công cụ được THÊM vào nút trong jQuery, không phải trong đánh dấu HTML.


Popovers làm việc giống như tooltips:

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

Và bạn có nó rồi đấy! Thành công cuối cùng.

Một trong những vấn đề lớn nhất khi tìm ra thứ này là làm cho bootstrap hoạt động với jsFiddle ... Đây là những gì bạn phải làm:

  1. Tham khảo về Twitter Bootstrap CDN từ đây: http://www.bootstrapcdn.com/
  2. Dán từng liên kết vào notepad và loại bỏ TẤT CẢ ngoại trừ URL. Ví dụ:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. Trong jsFiddle, ở bên trái, hãy mở menu thả xuống Nguồn lực bên ngoài accordion
  4. Dán vào từng URL, nhấn dấu cộng sau mỗi lần dán
  5. Bây giờ, hãy mở menu thả xuống "Khung & Phần mở rộng" và chọn jQuery 1.9.1 (hoặc bất kỳ ...)

BÂY GIỜ bạn đã sẵn sàng để đi.


trong jsFiddle, tại sao trình kích hoạt không được bao quanh bởi dấu ngoặc kép mà là vị trí?
HPWD

Không có lý do chính đáng, tôi chỉ bỏ lỡ nó. Nhưng nó có vẻ hoạt động. Có lẽ phím đơn từ không cần có dấu ngoặc kép - đôi khi họ không bắt buộc - tuy nhiên, tôi thường đặt chúng trong.
cssyphus

điều đó nghe hợp lý với tôi. Cảm ơn đã làm rõ.
HPWD

4
điều đó nghe có vẻ như vô nghĩa đối với tôi. Ha! chỉ có thể nói nó;)
Evan Larsen

Bạn có thể sử dụng phương pháp đó trong thuyết tương đối cho một vật chứa cụ thể không? Khởi tạo tất cả chú giải công cụ hoặc cửa sổ bật lên trong một vùng chứa cụ thể?
Michael Ecklund

231

Tôi sử dụng điều này trên tất cả các trang của mình để bật chú giải công cụ

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

4
cảm ơn, trong số tất cả các câu trả lời tôi đã đưa ra, tôi phải nói rằng tôi có lẽ đã dành ít thời gian nhất cho câu trả lời này. Nhưng bằng cách nào đó nó đã được thưởng nhiều điểm nhất.
Evan Larsen

Nhưng vấn đề là. nó không hoạt động với chrome đối với tôi. sau đó tôi đã kết thúc với việc làm một số việc jsfiddle.net/arunpjohny/4HptX/4 từ bài đăng này stackoverflow.com/questions/18372632/…
Md. Salahuddin

@Md Salahuddin, vậy nó hiện đang hoạt động, sau khi bạn cập nhật jquery của mình? Bạn đang hỏi một câu hỏi hay đó là một tuyên bố?
Evan Larsen

1
Nó chỉ là một tuyên bố. tôi đã sử dụng jsfiddle.net/arunpjohny/4HptX/4 thay vì mã này không hoạt động với chrome cho trường hợp của tôi.
Md. Salahuddin

27

Làm việc với BOOTSTRAP 3: Ngắn và Đơn giản

Kiểm tra - 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(); 
});

Điều này sẽ không hoạt động nếu bạn muốn có chức năng bật lên cho dữ liệu đang tải không đồng bộ (ajax, angle, v.v.) nhưng câu trả lời bên dưới sẽ.
Adrian Hedley

6

Tôi phải làm điều đó trên DOM đã sẵn sàng

$( 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
    });
});

Và thay đổi thứ tự tải của tôi thành:

  • jQuery
  • giao diện người dùng jQuery
  • Bootstrap

1
tôi đã gặp sự cố tương tự, đang tải jquery ui sau khi khởi động, câu trả lời của bạn khiến tôi nhận ra vấn đề với điều đó.
hubson bropa

kiểm tra này cho popover, 1. Kích hoạt các Popovers, 2. Định vị của Popovers qua dữ liệu thuộc tính
shaijut

5

Vì một số lý do, cách duy nhất tôi có thể làm cho mã của mình hoạt động là chuyển đổi một số thứ. Nếu không có gì hiệu quả cho bạn cho đến nay, vui lòng cho biết điều này:

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

1
Đây là điều duy nhất phù hợp với tôi vì phần tử bật lên có thể không được xem ngay từ đầu. Cảm ơn!
J. Titus

0

Bạn có lỗi cú pháp trong tập lệnh của mình và như đã được xXPhenom22Xx lưu ý, bạn phải khởi tạo chú giải công cụ.

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

Lưu ý rằng tôi đã sử dụng lớp học của bạn "btn-risk". Bạn có thể tạo một lớp khác hoặc sử dụng id="someidthatimakeup".


Ok, tôi đã thay đổi mã để phù hợp với những gì bạn đề xuất, tôi nghĩ vậy. Nó vẫn không hoạt động. Tôi không biết Javascript nên điều này là một chút khó khăn. Tôi chỉ đang cố gắng lấy những ví dụ mà họ phải làm theo cách tương tự.
user2560895

Cửa sổ bật lên có một chút khó khăn nhưng tôi đã có một phần chú giải công cụ để hoạt động như trên.
cssyphus

0

Bạn chỉ cần kích hoạt chú giải công cụ:

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

Không, điều đó sẽ chỉ hiển thị cửa sổ bật lên khi bạn di chuột qua nó, không phải chú giải công cụ.
CpnCrunch

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.