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 -

delay: { show: 500, hide: 100 }

Phương pháp

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

$().tooltip(options)

$('#element').tooltip('toggle')

$('#element').tooltip('show')

$('#element').tooltip('hide')

$('#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.

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

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

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

$('#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>