Chú giải công cụ khởi động không hiển thị lên

Question

Tôi đang cố gắng sử dụng Bootstrap tooltip trong một ứng dụng của tôi. Hiện tại, tôi có các thông tin sau:

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

Thật không may, chú giải công cụ của tôi không hiển thị. Tôi đang cố gắng tìm ra những gì tôi đang làm sai. Tôi biết rằng nó có thể được tạo ra thông qua JavaScript. Tuy nhiên, tôi đang cố gắng xác định chú giải công cụ của mình. Tôi đã xác nhận rằng tệp Tooltip.js đang được bao gồm. Tuy nhiên, tôi không thể hiểu được tôi đang làm gì sai.

Có thể sử dụng chú giải công cụ theo nghĩa khai báo thuần túy không? Nếu có, ai đó có thể chỉ cho tôi cách thực hiện thông qua mẫu JSFiddle hoặc Bootply? Tôi thực sự đập đầu vào cái này.

Answer 1

Không, không thể sử dụng chú giải công cụ theo nghĩa thuần túy. Từ Docs:

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Vì vậy, bạn phải gọi .tooltip() bằng tay trong JavaScript như thế này:

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

Hoặc sử dụng bất cứ điều gì bạn muốn chọn.

Working Demo in jsFiddle

nào nên trông như thế này:

Answer 2

Trong dự án của tôi Tôi có một div với lớp .btn nhóm và 3 'a' yếu tố với lớp btn. Khởi tạo với mã chính thức Bootstrap không làm việc (Tôi đang sử dụng Twitter.Bootstrap.less, tôi không biết nếu làm bất kỳ diference):

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

Sau đó, tôi tìm thấy một giải pháp trên Stackoverflow khác Giải đáp của ImaJedi4ever rằng làm việc như một sự quyến rũ đối với tôi, để khởi tạo chú giải công cụ khởi động:

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

Answer 3

Đã xảy ra sự cố khi hiển thị trong thiên thạch với phản ứng và bootstrap 4 alpha. điều này hoạt động như một phép thuật!

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