Bootstrap: Chú thích tooltip.js
Giải phóng thời gian, khai phóng năng lực
Các ví dụ
Lấy cảm hứng từ plugin jQuery.tipsy của Jason Frame; Plugin này hiện đang ở phiên bản mới nhất, phiên bản này không dựa vào ảnh mà sử dụng CSS3 cho các hiệu ứng động, và các thuộc tính dữ liệu cho cho việc lưu trữ các tiêu đề.
Di chuột qua các liên kết bên dưới để thấy chú thích:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Bốn hướng
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Tính năng opt-in
Vì lí do hiệu năng, Tooltip và Popover data-apis là opt-in, điều đó có nghĩa là bạn phải tự mình khởi tạo chúng.
Chú thích trong các nhóm nút và nhóm input cần các thiết lập đặc biệt
Khi sử dụng chú thích trên một phần tử bên trong một .btn-group
hoặc một .input-group
, bạn sẽ phải chỉ rõ tùy chọncontainer: 'body'
(được mô tả ở bên dưới) để tránh side-effect không mong muốn (ví dụ như phần tử có chiều rộng tăng lên hoặc mất đi góc bo tròn khi chú thích được kích hoạt).
Đừng cố gằng hiển thị chú thích trên các phần tử ẩn
Kích hoạt $(...).tooltip('show')
khi phần tử đích là display: none;
sẽ khiến cho chú thích hiển thị ở vị trí không chính xác.
Các chú thích trên các phần tử bị vô hiệu hóa cần các phần tử bọc ngoài
Để thêm một chú thích cho một phần tử disabled
hoặc .disabled
, hãy đặt phần tử đó vào bên trọng một <div>
và sử dụng tooltip trên phần tử <div>
đó.
Cách sử dụng
Plugin chú thích tạo ra nội dung và markup khi được yêu cầu và mặc định đặt các chú thích đó sao phần tử kích hoạt.
Kích hoạt chú thích bằng JavaScript:
$('#example').tooltip(options)
Markup
Markup cần thiết cho chú thích chỉ là thuộc tính data
và title
trên phần tử HTML mà bạn muốn gắn chú thích. Markup được tạo ra của chú thích khá đơn giản, mặc dù nó yêu cầu một vị trí (mặc định là top
).
Các liên kết nhiều dòng
Thi thoảng bạn muốn thêm chú thích cho một siêu liên kết trải dài trên nhiều dòng. Hành vi mặc định của plugin chú thích là căn giữa chúng theo hàng ngang và hàng dọc, vì vậy khi đó hãy thêm white-space: nowrap;
vào liên kết của bạn để tránh điều này.
1 <!-- HTML to write -->
2 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
3
4 <!-- Generated markup by the plugin -->
5 <div class="tooltip top">
6 <div class="tooltip-inner">
7 Some tooltip text!
8 </div>
9 <div class="tooltip-arrow"></div>
10 </div>
Các tùy chọn
Các tùy chọn có thể được truyền vào thông 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 thêm tên của tùy chọn vào data-
, tương tự như data-animation=""
.
Tên | Loại | Mặc định | Mô tả |
---|---|---|---|
animation | boolean | true | Áp dụng hiệu ứng CSS fade transition vào chú thích |
container | string | false | false |
Gắn chú thích vào một phần tử cụ thể. Ví dụ: |
delay | number | object | 0 |
Tạo thời gian trễ cho việc ẩn/hiện chú thích (ms) - không áp dụng cho trường hợp kích hoạt bằng tay Nếu chỉ có một số được truyền vào, thì sẽ được áp dụng cho cả việc ẩn và hiện Cấu trúc của đối tượng: |
html | boolean | false | Chèn mã HTML vào chú thích. Nếu giá trị là false, phương thức text của jQuery sẽ được sử dụng để chèn thêm nội dung vào DOM. Hãy sử dụng text nếu bạn lo lắng về các cuộc tấn công XSS. |
placement | string | function | 'top' | Xác định vị trí của chú thích - top | bottom | left | right | auto. Khi "auto" được truyền vào, nó sẽ tự động định hướng lại chú thích. Ví dụ, nếu placement là "auto left", chú thích sẽ hiển thị về phía bên trái khi có thể, nếu không nó sẽ hiển thị về phía bên phải. |
selector | string | false | Nếu một selector được cung cấp, các đối tượng chú thích sẽ được gắn với các mục tiêu cụ thể. Thực tế, tùy chọn này được sử dụng để cho phép thêm chú thích vào các nội dung HTML động. Hãy tham khảo mục này và một ví dụ trực tiếp. |
template | string | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Mã HTML cơ sở được sử dụng khi tạo chú thích.
Phần tử bọc ngoài cùng cần có class |
title | string | function | '' | Giá trị mặc định nếu như thuộc tính title không được chỉ rõ |
trigger | string | 'hover focus' | Cách chú thích được kích hoạt - click | hover | focus | manual. Bạn cũng có thể truyền vào nhiều cách kích hoạt, phân tách nhau bởi dấu cách. |
viewport | string | object | { selector: 'body', padding: 0 } |
Giữ chú thích nằm bên trong vùng giới hạn của phần tử này. Ví dụ: |
Các thuộc tính dữ liệu cho các chú thích riêng lẻ
Các tùy chọn cho các chú thích riêng lẻ có thể được thay thế bằng cách chỉ rõ thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên
Các phương thức
$().tooltip(options)
Gắn một bộ xử lý chú thích vào một tập hợp các phần tử.
.tooltip('show')
Hiển thị chú thích của phần tử.
$('#element').tooltip('show')
.tooltip('hide')
Ẩn chú thích của một phần tử.
$('#element').tooltip('hide')
.tooltip('toggle')
Toggles an element's tooltip.
$('#element').tooltip('toggle')
.tooltip('destroy')
Ẩn và xóa bỏ chú thích của một phần tử.
$('#element').tooltip('destroy')
Các sự kiện
Loại sự kiện | Mô tả |
---|---|
show.bs.tooltip | Sự kiện này xảy ra ngay khi phương thức show được gọi. |
shown.bs.tooltip | Sự kiện này xảy ra ngay khi chú thích hiển thị (đang đợi CSS transition kết thúc). |
hide.bs.tooltip | Sự kiện này xảy ra ngay khi phương thức hide được gọi. |
hidden.bs.tooltip | Sự kiện này xảy ra khi chú thích ẩn đi hoàn toàn (đang đợi CSS transition kết thúc). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
})
Giải phóng thời gian, khai phóng năng lực