Boottrap tooltips không hoạt động

260

Tôi đang phát điên ở đây.

Tôi đã có HTML sau:

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

Và tooltip kiểu Bootstrap từ chối hiển thị, chỉ là một tooltip bình thường.

Tôi đã có bootstrap.cs hoạt động tốt và tôi có thể thấy các lớp trong đó

Tôi đã có tất cả các tệp JS có liên quan ở cuối tệp HTML của mình:

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

Tôi đã xem xét nguồn ví dụ của Bootstrap và không thể thấy bất cứ điều gì khởi tạo tooltip ở bất cứ đâu trong đó. Vì vậy, tôi đoán nó chỉ nên hoạt động, hoặc tôi đang thiếu một cái gì đó quan trọng ở đây?

Tôi đã có các phương thức và cảnh báo và những thứ khác hoạt động tốt, vì vậy tôi không phải là một kẻ ngốc hoàn toàn;)

Cảm ơn vì bất kì sự giúp đỡ!

twitter-bootstrap 
— Mike Bartlett
nguồn
2
Chú giải công cụ đang được bắt đầu trong tệp application.js trong ví dụ twitters. Bạn có thể đăng html của bạn không? Muốn xem bạn đang khởi tạo tập lệnh như thế nào.
— Andres Ilich
2
Ahhhhh .... Tôi bỏ qua mà đưa ra nhận xét đầu tiên. Vì vậy, công việc này nên hoạt động: code<a href="#" rel="tooltip" title="A .tooltip-test '). tooltip () </ script>
— Mike Bartlett
1
đừng quên chuyển một bộ chọn cho các tùy chọn chú giải công cụ,$('.tooltip-test').tooltip({ selector: "a" })
— Andres Ilich
Cảm ơn Trên thực tế tôi dường như không cần bộ chọn trong đó, tôi nghĩ đó là bởi vì lớp của a được tham chiếu là kiểm tra công cụ.
— Mike Bartlett
3
Nếu không có tùy chọn bộ chọn, tooltip không hoạt động với tôi, đây là bản demo tôi đưa lên: jsfiddle.net/VXctp , hãy thử nó mà không có bộ chọn.
— Andres Ilich

Câu trả lời:

276

Để tổng hợp: kích hoạt chú giải công cụ của bạn bằng cách sử dụng bộ chọn jQuery

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

Thực tế, bạn không cần sử dụng bộ chọn thuộc tính, bạn có thể gọi nó trên bất kỳ phần tử nào ngay cả khi nó không có rel="tooltip"trong thẻ của nó.

— Manuel Ebert
nguồn
13
Đối với những người làm việc với Rails, điều này đã được quy định tại bootstrap.js.coffeevới $(".tooltip").tooltip(). Chỉ cần chắc chắn để bao gồm //= require bootstraptrong của bạn application.js.
— slhck
6
Thêm lớp .tooltip vào bất kỳ phần tử nào sẽ phá vỡ các chú giải công cụ cho tôi. Nội dung bên trong phần tử với lớp .tooltip sẽ ẩn và tooltip sẽ hiển thị nếu tôi quản lý để tìm phần tử ẩn trong bằng chuột. Sử dụng bất kỳ bộ chọn hoặc tên lớp nào khác sẽ hoạt động tốt. \
— Leonel Galán
4
@Leito là chính xác, bootstrap xác định kiểu cho .tooltipvà theo mặc định, chúng là vô hình. Tuy nhiên, bạn có thể sử dụng relthuộc tính hoặc bất kỳ lớp nào khác làm bộ chọn.
— Manuel Ebert
3
Có, bạn cần CẢ HAI Đánh dấu HTML và Bộ chọn JS. Đây không phải là cách thay thế để áp dụng chú giải công cụ.
— ATSiem
1
Một số có thể đang cố gắng hiển thị một chú giải công cụ theo phương thức và điều này không hoạt động trong tất cả các phiên bản bootstrap. Nếu bạn thử nó trong một trang bình thường, không phải phương thức và nó hoạt động, thì bạn biết đó là vấn đề.
— mjnissim
212

Sau khi gặp vấn đề tương tự, tôi thấy giải pháp này hoạt động mà không phải thêm các thuộc tính thẻ bổ sung bên ngoài các thuộc tính bắt buộc của Bootstrap.

HTML

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

JQuery

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

Hi vọng điêu nay co ich!

— Marcus Hoelscher
nguồn
20
Cảm ơn! Điều này làm việc cho tôi. Bằng cách nào đó, các giải pháp khác trên trang này không hiệu quả với tôi.
— La Mã
1
Tôi với Roman. Giải pháp này hoạt động với các biến thể css bootswatch là tốt.
— DaveCS
Điều này làm việc cho tôi. Không có gì khác đá nó vào cuộc sống cho đến khi tôi thử điều này. Cảm ơn!
— BlakePeteren
1
Điều này làm việc cho tôi quá. Mọi ý tưởng tại sao $ ('[data-toggle = "tooltip"]'). Tooltip ({'vị trí': 'top'}); không làm việc
— ZeroCool
Cảm ơn, điều này đã làm việc cho tôi. Chỉ cần đảm bảo rằng bạn chèn mã giữa các thẻ <script> SAU khi bạn tải thư viện JQuery.
— GeraldScott
31

Bạn không cần tất cả các tệp js riêng biệt

Chỉ cần sử dụng các tệp sau nếu bạn sẽ sử dụng tất cả các chức năng bootstrap:

-bootstrap.css
-bootstrap.js

cả hai đều có thể được tìm thấy trong http://twitter.github.com
và cuối cùng là
phiên bản jquery.js mới nhất

Đối với Glyphicons bạn cần hình ảnh

glyphicons-Halfings.png và / hoặc glyphicons-Halfings-white.png (hình ảnh màu trắng)
mà bạn cần tải lên bên trong / img / thư mục của trang web của bạn (hoặc) lưu trữ bất cứ nơi nào bạn muốn nhưng thay đổi thư mục thư mục bên trong bootstrap .css

Đối với chú giải công cụ, bạn cần tập lệnh sau trong <head> </head>thẻ của mình 

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

Đó là nó...

— Harish Kumar
nguồn
27

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

Chức năng chọn tham gia Vì lý do hiệu suất, Apx của Tooltip và Popover là tùy chọn, nghĩa là

bạn phải tự khởi tạo chúng.

Một cách để khởi tạo tất cả các chú giải công cụ trên một trang sẽ là chọn chúng theo thuộc tính chuyển đổi dữ liệu của chúng:

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

đưa đoạn mã này vào html của bạn cho phép bạn sử dụng các chú giải công cụ

Ví dụ:

<!-- 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>
— Tối đa
nguồn
2
Cảm ơn đã chia sẻ khái niệm chọn tham gia này! Không bao giờ đọc nó từ bất kỳ hướng dẫn.
— dpp
Giải pháp cho tất cả các tooltip jquery / bootstrap của tôi
— DJ Burb
Thiếu liên kết được cung cấp: vui lòng xem getbootstrap.com/docs/4.1/components/tooltips
— Guillaume Husta
20

Tôi biết đây là một câu hỏi cũ, nhưng vì tôi gặp vấn đề này với bản phát hành mới của bootstrap và nó không rõ ràng trên trang web, đây là cách bạn kích hoạt tooltip.

cung cấp cho phần tử của bạn một lớp như "tooltip-test"

sau đó kích hoạt lớp này trong thẻ javascript của bạn:

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

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
— Amir Soleymani
nguồn
Đây là giải pháp duy nhất hiệu quả với tôi. Tôi đang sử dụng data-original-title = "{{someAngularJSVar}}" để cập nhật tiêu đề và nó đang hoạt động hoàn hảo.
— WKara
19

HTML

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

JQuery

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

Đây là một công việc cho tôi.

— Igor Shvydok
nguồn
1
Đề xuất này làm việc hoàn hảo cho tôi là tốt. Tôi thích nó vì nó đơn giản và thanh lịch. Nó cho phép bạn tiếp tục sử dụng các tiêu chuẩn Bootstrap như thể plugin được khởi tạo theo mặc định, giống như xảy ra với các phần tử Dropdown và Tab. Tôi đã thêm JS được đề xuất bởi @Igor vào một tệp mới và gói nó vào bootstrap.js ban đầu
— Iago Rodríguez-Quintana
14

Nếu bạn làm $("[rel='tooltip']").tooltip();như các câu trả lời khác đã đề xuất thì bạn sẽ chỉ kích hoạt chú giải công cụ trên các phần tử hiện có trong DOM. Điều đó có nghĩa là nếu bạn định thay đổi DOM và chèn nội dung động sau này thì nó sẽ không hoạt động. Ngoài ra, điều này kém hiệu quả hơn nhiều vì nó cài đặt trình xử lý sự kiện cho các phần tử riêng lẻ thay vì sử dụng phân quyền sự kiện JQuery. Vì vậy, cách tốt nhất mà tôi đã tìm thấy để kích hoạt các công cụ Bootstrap là một dòng mã mà bạn có thể đặt trong tài liệu sẵn sàng và quên nó đi:

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

Lưu ý rằng tôi đang sử dụng titlelàm công cụ chọn thay vì rel=titlehoặc data-title. Điều này có một lợi thế là nó có thể được áp dụng cho nhiều yếu tố khác ( relđược cho là chỉ dành cho các neo) và nó cũng hoạt động như "dự phòng" cho các trình duyệt cũ.

Cũng lưu ý rằng bạn không cần data-toggle="tooltip"thuộc tính nếu bạn đang sử dụng mã ở trên.

Chú giải công cụ Bootstrap đắt tiền vì bạn cần xử lý các sự kiện chuột trên mỗi thành phần. Đây là lý do tại sao họ không kích hoạt nó theo mặc định. Vì vậy, nếu bạn từng quyết định bình luận ở trên dòng, trang của bạn sẽ vẫn hoạt động nếu bạn sử dụng thuộc tính tiêu đề.

Nếu bạn không sử dụng thuộc tính tiêu đề thì tôi khuyên bạn nên sử dụng giải pháp CSS thuần túy như Hint.css hoặc kiểm tra http://csstooltip.com không yêu cầu bất kỳ mã JavaScript nào.

— Shital Shah
nguồn
Tôi đang vật lộn với cái này vì thế hệ động đi sâu vài cấp. Giá trị href là nội dung được tạo động và id div kết quả được dựa trên số mục khớp với giá trị href. Vì vậy, nếu tôi có một trang liên kết của Loại A, thì tôi có một danh sách các mục a-1, mục a-2, mục a-3, mỗi liên kết đó là trang riêng của các mục, nhưng tôi muốn nội dung chú giải công cụ để hiển thị nội dung động khi di chuột, vì vậy người dùng có thể biết một số ý tưởng về mục này trước khi nhấp vào liên kết đầy đủ.
— Melanie Sumner
Đây là hữu ích nhất. Tôi đã cài đặt tooltip để liên kết với một biểu tượng và thư viện biểu tượng có một số loại tải không đồng bộ để nó không thể liên kết. Thật lạ vì nó sẽ hoạt động khi sử dụng bộ chọn lớp nhưng không phải ID. Cảm ơn sự giúp đỡ của bạn!
— Nick Woodhams
14

Đây là cách đơn giản nhất. Chỉ cần đặt cái này trước </body>:

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

Kiểm tra các ví dụ được đưa ra trong tài liệu của Bootstrap về chú giải công cụ .

Ví dụ: 

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>
— Marcos Cassiano
nguồn
2
vui lòng đóng thuộc tính loại ... chỉnh sửa chỉ một lỗi đánh máy là Pita: S
— Mohd Abdul Mujib
10

Tooltip và popover KHÔNG phải là các plugin chỉ css như thả xuống hoặc thanh tiến trình. Để sử dụng chú giải công cụ và cửa sổ bật lên, bạn PHẢI kích hoạt chúng bằng jquery (đọc javascript).

Vì vậy, giả sử chúng tôi muốn một cửa sổ bật lên được hiển thị khi nhấp vào nút 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>

Sau đó, bạn cần phải có mã javascript để kích hoạt popover:

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

Trên thực tế, mã javascript ở trên sẽ kích hoạt popover trên tất cả các phần tử html có lớp "popovers-to-be-activ".

Không cần phải nói, hãy đặt javascript ở trên trong hàm gọi lại sẵn sàng DOM để kích hoạt tất cả các cửa sổ bật lên ngay khi DOM sẵn sàng:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
— Mayank Jaiswal
nguồn
5

trong phần đầu bạn cần thêm đoạn mã sau

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

Sau đó, trong phần cơ thể bạn cần phải viết mã sau đây

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

— Rush.2707
nguồn
4

Nếu mọi thứ vẫn chưa được giải quyết Sử dụng thư viện Jquery mới nhất, bạn không cần bất kỳ bộ chọn jquery nào nếu bạn sử dụng bootstrap 2.0.4 và jquery-1.7.2.js mới nhất

Chỉ dùng rel="tooltip" title="Your Title" data-placement=" "

Sử dụng trên cùng / dưới cùng / trái / phải trong vị trí dữ liệu theo mong muốn của bạn.

— Harish Kumar
nguồn
3

Tôi đã thêm jquery và bootstrap-tooltip.js trong tiêu đề. Thêm mã này trong footer hoạt động cho tôi! nhưng khi tôi thêm cùng một mã trong tiêu đề thì nó không hoạt động! 

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
— Karthik
nguồn
3
Trong trường hợp này, DOM chưa được tải, vì vậy tất cả các yếu tố của tôi không tồn tại trên trang. Gói mã ở trên trong$(function() { ... });
— johnml
3

Nếu sử dụng Rails + Haml dễ dàng hơn để bao gồm chú giải công cụ, chỉ cần làm:

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

Đó chỉ là thêm dòng sau vào cuối phần tử.

:rel => "tooltip", :title => "Referential Guide"
— Thủ thành
nguồn
Đã thực sự hy vọng rằng nó sẽ làm việc cho tôi, nhưng than ôi đã không làm được.
— Turboladen
Bây giờ tôi thích Djanto hơn Rails nhưng nếu bạn dán mã của mình, tôi có thể cố gắng cung cấp cho bạn một số mẹo.
— Andres Calle
3

Trong trường hợp cụ thể của tôi, nó không hoạt động vì tôi đã bao gồm hai phiên bản jQuery. Một cho bootstrap, nhưng một cái khác (phiên bản khác) cho Biểu đồ của Google.

Khi tôi loại bỏ tải jQuery cho các biểu đồ, nó hoạt động tốt.

— Ăn kiêng
nguồn
3

Tôi chỉ thêm:

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

bên dưới bootstrap.min.js và nó hoạt động.

— Andy.sin
nguồn
3

Hãy sử dụng một ví dụ để hiển thị cách Tooltips có thể được thêm vào bất kỳ thành phần HTML nào trong tài liệu của bạn.

GHI CHÚ:

Nếu các mẫu chú giải công cụ này không hoạt động khi bạn đặt chúng vào trang của mình, thì bạn có một vấn đề khác. Bạn cần nhìn vào những thứ như:

  • Thứ tự của các kịch bản được bao gồm
  • Xem nếu bạn đang cố gắng khởi tạo các phần tử HTML đã bị xóa
  • Xem nếu bạn đang cố gắng gọi các phương thức trong các tệp JS, bạn không còn bao gồm

  • Xem nếu bạn đang bao gồm tệp JS cung cấp chức năng bạn cần (không chỉ cho chú giải công cụ, mà bất kỳ thành phần nào bạn sử dụng trên trang).

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

Thất bại của BẤT K of các mục trên có thể (và thường không) ngăn javascript tải và / hoặc chạy, và điều đó giữ cho mọi thứ tốt đẹp và bị hỏng.

BÀI TẬP LÀM VIỆC

Giả sử bạn có một huy hiệu và bạn muốn nó hiển thị một chú giải công cụ khi người dùng di chuyển qua nó.

HTML gốc:

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

Công cụ khởi động đơn giản

Nếu bạn đang tạo chú giải công cụ cho Phần tử HTML và bạn đang sử dụng chú giải công cụ Plain Bootstrap, thì bạn sẽ chịu trách nhiệm gọi Công cụ khởi tạo Tooltip bằng mã JavaScript của riêng bạn.

TRƯỚC

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

SAU

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

BAN ĐẦU

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

Bootstrap Template Tooltips (chẳng hạn như INSPINIA)

Nếu bạn đang sử dụng mẫu bootstrap (chẳng hạn như INSPINIA), bạn đang bao gồm một tập lệnh hỗ trợ để hỗ trợ các tính năng của mẫu:

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

Trong trường hợp INSPINIA, tập lệnh đi kèm sẽ tự động khởi chạy tất cả các chú giải công cụ bằng cách chạy mã javascript sau khi tải tài liệu xong:

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

Vì điều này, bạn KHÔNG phải tự khởi tạo Tooltips theo kiểu INSPINIA. Nhưng bạn phải định dạng các yếu tố của mình một cách cụ thể. Trình khởi tạo tìm kiếm các phần tử HTML có tooltip-demotrong classthuộc tính, sau đó gọi tooltip()phương thức để khởi tạo bất kỳ phần tử con nào có thuộc tính data-toggle="tooltip"được xác định.

Đối với huy hiệu ví dụ của chúng tôi, đặt một yếu tố bên ngoài xung quanh nó (giống như một <div>hoặc <span>) mà có class="tooltip-demo", sau đó đặt data-toggle, data-placementvà titlethuộc tính cho các tooltip thực tế trong các yếu tố đó là huy hiệu. Sửa đổi HTML gốc từ phía trên để trông giống như thế này:

TRƯỚC

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

SAU

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

BAN ĐẦU

None

Lưu ý rằng bất kỳ phần tử con nào trong <span class="tooltip-demo">phần tử sẽ được chuẩn bị đúng tooltip của chúng. Tôi có thể có ba phần tử con, tất cả đều cần chú giải công cụ và đặt chúng trong một thùng chứa.

Nhiều mục, mỗi mục có một Tooltip

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

Việc sử dụng tốt nhất cho việc này sẽ là thêm class="tooltip-demo"một <td>hoặc ngoài cùng <div>hoặc <span>.

Plain Bootstrap Tooltips trong khi sử dụng Mẫu

Nếu bạn đang sử dụng INSPINIA, nhưng bạn không muốn thêm thẻ ngoài <div>hoặc <span>thẻ bổ sung để tạo chú giải công cụ, bạn có thể sử dụng Chú giải công cụ Bootstrap tiêu chuẩn mà không can thiệp vào mẫu. Trong trường hợp này, bạn sẽ chịu trách nhiệm tự khởi tạo Tooltips. Tuy nhiên, bạn nên sử dụng một giá trị tùy chỉnh trong classthuộc tính để xác định các mục Tooltip của bạn. Điều này sẽ giữ cho trình khởi tạo Tooltip của bạn không can thiệp vào các yếu tố bị ảnh hưởng bởi INSPINIA. Trong ví dụ của chúng tôi, hãy sử dụng standalone-tt:

TRƯỚC

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

SAU

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

BAN ĐẦU

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>
— Mike Stillion
nguồn
2

Nếu bạn đang tạo html chứa tooltip bằng javascript, sau đó chèn nó vào tài liệu, bạn phải kích hoạt popover / tooltip SAU KHI bạn đã chèn html vào tài liệu, không tải tài liệu ...

— chri_chri
nguồn
2

Bạn phải đặt javascript tooltip sau html. như thế này :

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

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

</script>

Hoặc sử dụng $ (tài liệu). Đã: 

$(document).ready(function() {

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

});

</script>

Tooltip không hoạt động vì bạn đặt tooltip html trước javascript , vì vậy họ không biết có javascript cho tooltip không. Theo tôi, kịch bản được đọc từ đầu đến cuối.

— Thu phóng
nguồn
2

Tôi đã có một vấn đề tương tự và đặc biệt là nếu bạn đang chạy trong một nút chứa như nút chứa nút dọc. Trong trường hợp đó, bạn phải đặt container là 'cơ thể'

I have added a jsfiddle example

thí dụ

— Shawn Vader
nguồn
1

Từ tài liệu bootstrap trên tooltips

Chú giải công cụ được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng. Một cách để khởi tạo tất cả các chú giải công cụ trên một trang sẽ là chọn chúng theo thuộc tính chuyển đổi dữ liệu của chúng:

  $('[data-toggle="tooltip"]').tooltip()
— La Mã
nguồn
0

Thêm data-toggle="tooltip"vào bất cứ yếu tố nào bạn muốn với một tooltip.

— Calum Childs
nguồn
0

Bạn cần làm như sau. Thêm

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

mã ở đâu đó trên trang của bạn (tốt nhất là trong <head>phần).

Ngoài ra, thêm data-toggle: "tooltip"vào bất cứ điều gì bạn muốn kích hoạt với nó.

— Calum Childs
nguồn
0

bạn có thể sử dụng Popper.js

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

Và gọi hàm tooltip:

$('document').ready(function(){
    $('[data-toggle=tooltip]').tooltip();
});
— Mohsen Newtoa
nguồn
-2

Thay thế nhanh và nhẹ hơn cho plugin tooltip Bootstrap:

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>

CSS:

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

Công ty cổ phần:

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

Nhãn / văn bản phải được đặt trong một trình bao bọc của lớp "mytooltip" Trình bao bọc này phải có Id.

Sau nhãn có văn bản mẹo công cụ được bọc trong một div của lớp "mytooltiptext" và id bao gồm id của trình bao bọc cha mẹ + "_tttext". Các tùy chọn khác cho bộ chọn có thể được sử dụng.

Hy vọng nó giúp.

— jdisla
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.