Tôi có thể phụ thuộc vào thuộc tính tiêu đề hiển thị dưới dạng chú giải công cụ không?

Question

Chúng tôi đã mã hóa các chú giải công cụ đơn giản vào trang web của chúng tôi trong một thời gian và chỉ nhận ra rằng chúng tôi có thể thực hiện điều tương tự bằng cách sử dụng thuộc tính "tiêu đề". Bất kỳ lý do nào mà chúng tôi không nên sử dụng thuộc tính tiêu đề làm chú giải công cụ? Có bất kỳ trình duyệt nào không hỗ trợ tính năng này không? (w3schools dường như chỉ ra rằng tất cả các trình duyệt chính đều hỗ trợ điều này.)

Answer 1

Tất cả các trình duyệt chính đều hỗ trợ title. Nhưng sau đó bạn không có khả năng hiển thị loại chú giải công cụ tùy chỉnh này: http://www.dreamcss.com/2009/03/list-of-25-javascriptajax-css-tooltip.html

Bạn đã thấy Thẻ di chuột của người dùng trên SO (trang web này) chưa? Nếu họ đã sử dụng tiêu đề thì nó có thể không thể hiển thị một tooltip tuyệt vời như vậy.

Answer 2

Đây là một tiêu chuẩn, bạn nên khá an toàn.

Xem http://www.w3.org/TR/html4/struct/global.html#h-7.4.3

Answer 3

Tất cả các trình duyệt chính trên thực tế cũng hỗ trợ tooltips, vì vậy cảm thấy tự do để sử dụng thuộc tính tiêu đề cho họ. Tôi sẽ cảnh báo rằng bạn cũng cung cấp thuộc tính alt để phản chiếu tiêu đề vì lợi ích của khả năng truy cập (chủ yếu cho người dùng khiếm thị và người khiếm thị) và khả năng chịu lỗi (như thể hình ảnh không tải hoặc người dùng đang sử dụng người dùng chặn hình ảnh) đại lý từ một kết nối chậm).

Answer 4

Thật chậm để hiển thị (1 hoặc 2 trên Chrome) và tôi nghi ngờ người dùng internet hiện đại có nhiều kiên nhẫn chờ đợi nó hiển thị.

Bạn có thể sử dụng các plugin của bên thứ ba hoặc tự mã hóa nó (những gì tôi làm hầu hết thời gian) bằng cách sử dụng các sự kiện "mouseenter" và "mouseleave" của jQuery. đang giả như sau: html:

<button id="button-awesome">Awesome</button> 
 

 
<div class="tooltip" style="display:none"> 
 
This is a button 
 
</div>

JavaScript/jQuery:

$('#button-awesome').on('mouseenter', function() { 
 
    show Tooltip // toggle, or slideToggle, or .css("display","block") or .removeClass('hidden') 
 
}).on('mouseleave', function() { 
 
    // undo what you've just done. 
 
});

Answer 5

Hãy cẩn thận khi nói đến trình duyệt di động. Nó hầu như không được hỗ trợ ở đó.