Bootstrap - Trình cắm chú giải công cụ

Chú giải công cụ hữu ích khi bạn cần mô tả một liên kết. Plugin được lấy cảm hứng từ plugin jQuery.tipsy do Jason Frame viết . Các chú giải công cụ kể từ đó đã được cập nhật để hoạt động mà không cần hình ảnh, tạo hoạt ảnh bằng hoạt ảnh CSS và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần tooltip.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .

Sử dụng

Plugin chú giải công cụ tạo nội dung và đánh dấu theo yêu cầu và theo mặc định đặt chú giải công cụ sau phần tử kích hoạt của chúng. Bạn có thể thêm chú giải công cụ theo hai cách sau:

  • Via data attributes - Để thêm chú giải công cụ, hãy thêm data-toggle = "tooltip"vào một thẻ liên kết. Tiêu đề của anchor sẽ là văn bản của chú giải công cụ. Theo mặc định, chú giải công cụ được plugin đặt ở trên cùng.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
  • Via JavaScript - Kích hoạt chú giải công cụ qua JavaScript -

$('#identifier').tooltip(options)

Plugin chú giải công cụ KHÔNG phải là plugin duy nhất của css như trình đơn thả xuống hoặc các plugin khác được thảo luận trong các chương trước. Để sử dụng plugin này, bạn PHẢI kích hoạt nó bằng jquery (đọc javascript). Để bật tất cả các chú giải công cụ trên trang của bạn, chỉ cần sử dụng tập lệnh này -

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Thí dụ

Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

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

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

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Tùy chọn

Có một số tùy chọn có thể được thêm vào qua API dữ liệu Bootstrap hoặc được gọi qua JavaScript. Bảng sau liệt kê các tùy chọn -

Tên tùy chọn Loại / Giá trị mặc định Tên thuộc tính dữ liệu Sự miêu tả
hoạt hình boolean Mặc định: true dữ liệu-hoạt ảnh Áp dụng chuyển đổi mờ dần CSS cho chú giải công cụ.
html boolean Mặc định: false data-html Chèn HTML vào chú giải công cụ. Nếu sai, phương thức văn bản của jQuery sẽ được sử dụng để chèn nội dung vào dom. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS.
vị trí string | function Mặc định: top vị trí dữ liệu

Chỉ định cách định vị chú giải công cụ (tức là trên cùng | dưới cùng | trái | phải | tự động).

Khi tự động được chỉ định, nó sẽ tự động định hướng lại chú giải công cụ. Ví dụ: nếu vị trí là "tự động bên trái", chú giải công cụ sẽ hiển thị bên trái khi có thể, nếu không, nó sẽ hiển thị bên phải.

bộ chọn string Mặc định: false bộ chọn dữ liệu Nếu một bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu được chỉ định.
tiêu đề chuỗi | chức năng Mặc định: " data-title Tùy chọn tiêu đề là giá trị tiêu đề mặc định nếu thuộc tính tiêu đề không có.
Kích hoạt string Mặc định: 'di chuột tiêu điểm' kích hoạt dữ liệu Xác định cách chú giải công cụ được kích hoạt: click| hover | focus | manual. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng.
Nội dung chuỗi | chức năng Mặc định: '' dữ liệu-nội dung Giá trị nội dung mặc định nếu thuộc tính data-content không có
sự chậm trễ số | đối tượng Mặc định: 0 dữ liệu chậm trễ

Độ trễ hiển thị và ẩn chú giải công cụ tính bằng mili giây - không áp dụng cho loại kích hoạt thủ công. Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn / hiện. Cấu trúc đối tượng là -

delay: { show: 500, hide: 100 }
thùng đựng hàng chuỗi | false Mặc định: false vùng chứa dữ liệu Thêm chú giải công cụ vào một phần tử cụ thể. Ví dụ: container: 'body'

Phương pháp

Sau đây là một số phương pháp hữu ích cho chú giải công cụ -

phương pháp Sự miêu tả Thí dụ

Options - .tooltip (tùy chọn)

Đính kèm trình xử lý chú giải công cụ vào tập hợp phần tử.
$().tooltip(options)

Toggle - .tooltip ('chuyển đổi')

Chuyển đổi chú giải công cụ của phần tử.
$('#element').tooltip('toggle')

Show - .tooltip ('hiển thị')

Tiết lộ chú giải công cụ của phần tử.
$('#element').tooltip('show')

Hide - .tooltip ('ẩn')

Ẩn chú giải công cụ của phần tử.
$('#element').tooltip('hide')

Destroy - .tooltip ('tiêu diệt')

Ẩn và hủy chú giải công cụ của phần tử.
$('#element').tooltip('destroy')

Thí dụ

Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Sự kiện

Bảng sau liệt kê các sự kiện để làm việc với plugin chú giải công cụ. Sự kiện này có thể được sử dụng để nối vào hàm.

Biến cố Sự miêu tả Thí dụ
show.bs.tooltip Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
show.bs.tooltip Sự kiện này được kích hoạt khi chú giải công cụ hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltip Sự kiện này được kích hoạt khi chú giải công cụ hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Thí dụ

Ví dụ sau minh họa việc sử dụng plugin chú giải công cụ thông qua các thuộc tính dữ liệu.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>