Hướng dẫn bootstrap tooltip accessibility - khả năng truy cập chú giải công cụ bootstrap
|
Tài liệu và ví dụ để thêm các bộ công cụ Bootstrap tùy chỉnh với CSS và JavaScript bằng CSS3 cho hình ảnh động và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ. Show
Tổng quanNhững điều cần biết khi sử dụng plugin Tooltip:
Có tất cả những thứ đó? Tuyệt vời, hãy để xem cách họ làm việc với một số ví dụ. 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 bằng thuộc tính Ví dụDi chuột qua các liên kết bên dưới để xem chú giải công cụ: Quần bó sát cấp độ keffiyeh có lẽ bạn đã không nghe nói về chúng. BOOTH BOOTH BEARD RAW denim Letterpress Vegan Messenger Bag Stumptown. Seitan từ nông trại đến bàn, trang phục Mỹ 8 bit của McSweeney có một chiếc Vinyl Chambray Terry Richardson. Beard Stumptown, Cardigans Banh Mi Lomo Thundercats. Đậu phụ Biod Diesel Williamsburg Marfa, Four Loko McSweeney's Cleanse Vegan Chambray. Một nghệ nhân thực sự mỉa mai bất kể Keytar, Banksy Austin Austin Austin xử lý Freegan Cred Cred Denim Cà phê duy nhất. Di chuột qua các nút bên dưới để xem bốn hướng dẫn của Tooltips: trên cùng, phải, dưới cùng và bên trái. Và với HTML tùy chỉnh được thêm vào: Cách sử dụngPlugin Tooltip tạo nội dung và đánh dấu theo yêu cầu và theo các công cụ mặc định là chú giải công cụ sau phần tử kích hoạt của chúng. Kích hoạt chú giải công cụ thông qua JavaScript: Đánh dấuĐánh dấu bắt buộc cho một công cụ chỉ là thuộc tính Làm công cụ hoạt động cho bàn phím và người dùng công nghệ hỗ trợBạn chỉ nên thêm các chú giải công cụ vào các phần tử HTML có thể tập trung và tương tác với bàn phím truyền thống (như liên kết hoặc điều khiển biểu mẫu). Mặc dù các phần tử HTML tùy ý (như Ngoài ra, không chỉ dựa vào Các yếu tố bị vô hiệu hóaCác yếu tố với thuộc tính Tùy chọnCác tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào
bù lạiSố | sợi dây Offset của ToolTip so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo các tài liệu bù của popper.js.sự thất bạiChuỗi | mảngasynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored. 'Lật'
$('#element').tooltip('show') |
| Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin. | Đính kèm một bộ xử lý Tooltip vào một bộ sưu tập phần tử. |
|---|---|
Tiết lộ một bộ công cụ yếu tố. Trả về cho người gọi trước khi chú giải công cụ thực sự được hiển thị (nghĩa là trước khi sự kiện | Ẩn một bộ công cụ yếu tố. Trả về cho người gọi trước khi chú giải công cụ thực sự bị ẩn (nghĩa là trước khi sự kiện |
Bật một bộ công cụ phần tử. Trả về cho người gọi trước khi chú giải công cụ thực sự được hiển thị hoặc ẩn (nghĩa là trước khi sự kiện | Ẩn và phá hủy một bộ công cụ yếu tố. Các chú giải công cụ sử dụng ủy quyền (được tạo bằng tùy chọn |
| Cung cấp cho một bộ công cụ của phần tử khả năng được hiển thị. Tooltips được bật theo mặc định. | Loại bỏ khả năng cho một bộ công cụ phần tử được hiển thị. ToolTip sẽ chỉ có thể được hiển thị nếu nó được kích hoạt lại. |
| Chuyển đổi khả năng cho một bộ công cụ của phần tử được hiển thị hoặc ẩn. | Cập nhật vị trí của một bộ công cụ phần tử. |
| Sự kiện | Sự kiện này được bắn sau sự kiện |
type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
