2013-01-24 22 views
13

Trong tài liệu hướng dẫn khởi động cho chú giải công cụ, nó sử dụng <a href="#" rel="tooltip" title="first tooltip">hover over me</a>. Tooltips chỉ là mỹ phẩm mặc dù. Không phải kiểu css mà chỉ là một chút của JS để thay đổi cách một thuộc tính title được trình bày.rel = "tooltip", có thực tế không?

Thuộc tính "rel" được sử dụng để nói với bot (chẳng hạn như google) về bản chất của liên kết. Các tùy chọn là thay thế, tác giả, dấu trang, trợ giúp, giấy phép, tiếp theo, nofollow, noreferrer, prefetch, prev, search và tag.

Việc sử dụng rel = "tooltip" có phải là điều không hay vì chú giải công cụ là mỹ phẩm, không nói gì về bản chất của liên kết và không phải là bot hoặc trình duyệt có khả năng diễn giải?

+2

Chú giải này sẽ được thay đổi trong Bootstrap 2.3 ([ nguồn] (https://github.com/twitter/bootstrap/pull/6380)). – Sara

Trả lời

11

Bằng cách sử dụng rel="tooltip" tài liệu của bạn sẽ không xác thực theo tiêu chuẩn web của W3C.

Bạn sẽ nhận được lỗi này từ W3C validator:

giá trị tooltip Xấu cho thuộc tính rel vào yếu tố a: Không phải là IRI tuyệt đối. Chú giải công cụ chuỗi không phải là từ khóa đã đăng ký hoặc URL tuyệt đối.

Sẽ tốt hơn, xác định một tooltip liên kết với một lớp như:
<a href="#" class="tooltip" title="first tooltip">hover over me</a>

  • Tuy nhiên, thuộc tính rel không được sử dụng bởi các trình duyệt trong bất kỳ cách nào, như bạn đã đề cập, nhưng nó có thể ảnh hưởng đến xếp hạng của bạn trong tìm kiếm động cơ. Google suggests để xác thực tài liệu của bạn và để "viết HTML rõ ràng, tốt".
  • Thuộc tính rel cũng có thể là thú vị cho các công cụ trợ năng như trình đọc màn hình.
+0

@Bryan Ash câu trả lời là tốt cho tooltip. –

7

Hoặc dễ dàng bạn có thể thay thế thuộc tính rel-rel data-rel (hoàn toàn hợp lệ).

dụ:

$("a[data-rel]").tooltip(); 
+0

+1 Điều này có nhiều lợi ích và phân tách nó khỏi thuộc tính lớp; Tôi nghĩ đây là giải pháp thay thế tốt nhất. – Jessycormier

1

Các Bootstrap documentation gợi ý sử dụng data-toggle="tooltip", ví dụ:

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

và cho phép họ với:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 
Các vấn đề liên quan