2013-06-22 38 views
12

Trong trang tài liệu Bootstrap, các tooltip có chữ ký của:Bootstrap tooltip dữ liệu chuyển đổi

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a> 

Gì "dữ liệu chuyển đổi" thuộc tính làm gì trong tình huống này?

Tôi biết nó hữu ích cho các tab nhưng tôi không thấy những gì hữu ích mà nó có thể mang đến cho chú giải công cụ.


Chris,

Các tooltip phải được khởi tạo một cách rõ ràng như trong:

$(document).ready(function(){ 
    $(".link").tooltip(); 
}); 

Giả sử rằng "a" thẻ có một lớp học của "liên kết". Thuộc tính "data-toggle" không bắt buộc đối với chú giải công cụ để hoạt động chính xác. Nhưng bạn đã đề cập rằng nó dành cho tệp JavaScript Bootstrap để nhận ra nếu một cái gì đó là một chú giải công cụ. Vì vậy, nó không có vẻ có ý nghĩa rằng bỏ qua "chuyển đổi dữ liệu" vẫn làm cho tooltip làm việc (miễn là có khởi tạo rõ ràng). Bạn có thể giải thích thêm?

Chỉnh sửa # 2:

Sau khi đọc một số trang vấn đề GitHub, tôi nghĩ rằng tôi đã đi đến kết luận sau đây (đó là đoán tốt nhất của tôi).

Nguyên, trong các phiên bản cũ của Bootstrap, chữ ký tooltip là:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a> 
... 
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a> 

Và các nhà phát triển có thể làm:

$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
}); 

Để kích hoạt tất cả tooltips cùng một lúc (vì mỗi tooltip đòi hỏi một khởi tạo để làm việc). Nói cách khác, nó chỉ là một cách thuận tiện để nhận dạng tất cả các chú giải công cụ để bạn có thể sử dụng jQuery để kích hoạt tất cả chúng.

Nhưng rel = "tooltip" không xác thực với HTML5, vì vậy mọi người bắt đầu đề xuất sử dụng data-toggle = "tooltip" vì Bootstrap đã sử dụng chuyển đổi dữ liệu cho các thành phần và dữ liệu khác * hợp lệ trong HTML5.

Vì vậy, tôi đoán là không có ý nghĩa ngữ nghĩa đặc biệt hoặc mục đích cho dữ liệu-toggle = "tooltip" khác hơn là cung cấp một cách thuận tiện để nhận dạng tất cả các chú giải công cụ.

Lưu ý rằng bạn cũng có thể nhận dạng các chú giải công cụ bằng ID hoặc lớp, nhưng tại sao không kích hoạt tất cả các chú giải công cụ cùng một lúc (câu hỏi tu từ)?

+0

thú mỏ vịt, nếu bạn đã đưa ra một câu trả lời cho câu hỏi của riêng bạn, vui lòng thêm câu hỏi đó dưới dạng Câu trả lời mới (biểu mẫu ở cuối trang) thay vì thêm nó vào chính câu hỏi đó. – Lemmings19

Trả lời

13

Sau khi đọc một số trang vấn đề GitHub, tôi nghĩ rằng tôi đã đi đến kết luận sau (đó là dự đoán tốt nhất của tôi).

Nguyên, trong các phiên bản cũ của Bootstrap, chữ ký tooltip là:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a> 
... 
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a> 

Và các nhà phát triển có thể làm:

$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
}); 

Để kích hoạt tất cả các tooltips cùng một lúc (vì mỗi tooltip đòi hỏi một khởi để công việc). Nói cách khác, nó chỉ là một cách thuận tiện để xác định tất cả các tooltips để bạn có thể sử dụng jQuery để kích hoạt tất cả chúng.

Nhưng rel = "tooltip" không xác thực với HTML5, vì vậy mọi người bắt đầu đề xuất sử dụng data-toggle = "tooltip" vì Bootstrap đã sử dụng chuyển đổi dữ liệu cho các thành phần và dữ liệu khác * hợp lệ trong HTML5.

Vì vậy, tôi đoán là không có ý nghĩa ngữ nghĩa đặc biệt hoặc mục đích cho dữ liệu-toggle = "tooltip" khác hơn là cung cấp một cách thuận tiện để nhận dạng tất cả các chú giải công cụ.

Lưu ý rằng bạn cũng có thể xác định các chú giải công cụ bằng ID hoặc lớp, nhưng tại sao không kích hoạt tất cả các chú giải công cụ cùng một lúc (câu hỏi tu từ)?

1

Họ đã chọn sử dụng data-toggle làm chỉ báo trong JavaScript của họ khi có điều gì đó là chú giải công cụ. Khi tệp tin tooltips JS thấy thuộc tính data-toggle="tooltip", nó biết để khởi động và chạy.

Cách tiếp cận phổ biến hơn có thể là sử dụng lớp học (<a href="#" class="tooltip" title="first tooltip">hover over me</a>), nhưng thay vào đó, chúng đã chuyển sang thuộc tính data-*. Có điều tương tự, công trình, và philisophically, data-* thuộc tính được thiết kế cho thao tác JavaScript, vì vậy tôi cho rằng nó là tốt để giữ cho nó lớp miễn phí.

+0

Bạn biết đấy, khi xem qua kịch bản trên GitHub, tôi đang thua lỗ. Tôi không nhìn thấy nó tham chiếu bất cứ nơi nào trong mã. Vì vậy, yea ... –

+0

Tham khảo tốt nhất tôi có thể tìm thấy là: https://github.com/twitter/bootstrap/pull/3031 – platypus

+0

Tôi nghĩ rằng tôi có một lời giải thích. Xem chỉnh sửa thứ hai ở trên. – platypus

5

tôi sử dụng này:

<script> 
    $('[title]').tooltip(); 
</script> 

nó sẽ chọn tất cả các yếu tố đó là tiêu đề thuộc tính xác định, và thay thế hành vi tooltip mặc định với bootstrapped một ..

Các vấn đề liên quan