Bootstrap: Chú thích tooltip.js

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:

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>

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).

 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="".

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

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})