Chú giải công cụ

Tổng quan

Những điều cần biết khi sử dụng plugin chú giải công cụ:

• Chú giải công cụ dựa vào Popper thư viện của bên thứ 3 để định vị. Bạn phải bao gồm popper.min.js trước bootstrap.js hoặc sử dụng bootstrap.bundle.min.js/ bootstrap.bundle.jscó chứa Popper để các chú giải công cụ hoạt động!
• Chú giải công cụ được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng .
• Chú giải công cụ có tiêu đề dài bằng 0 không bao giờ được hiển thị.
• Chỉ định container: 'body'để tránh các sự cố hiển thị trong các thành phần phức tạp hơn (như nhóm đầu vào, nhóm nút của chúng tôi, v.v.).
• Kích hoạt chú giải công cụ trên các phần tử ẩn sẽ không hoạt động.
• Chú giải công cụ cho .disabledhoặc disabledcác phần tử phải được kích hoạt trên một phần tử trình bao bọc.
• Khi được kích hoạt từ các siêu liên kết trải dài nhiều dòng, chú giải công cụ sẽ được căn giữa. Sử dụng white-space: nowrap;trên <a>s của bạn để tránh hành vi này.
• Chú giải công cụ phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM.
• Chú giải công cụ có thể được kích hoạt nhờ vào một phần tử bên trong DOM bóng.

Có tất cả những điều đó? Tuyệt vời, hãy xem chúng hoạt động như thế nào với một số ví dụ.

Ví dụ: Bật chú giải công cụ ở mọi nơi

Một cách để khởi tạo tất cả các chú giải công cụ trên một trang là chọn chúng theo data-bs-togglethuộc tính của chúng:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Các ví dụ

Di chuột qua các liên kết bên dưới để xem các chú giải công cụ:

Di chuột qua các nút bên dưới để xem bốn hướng của chú giải công cụ: trên cùng, bên phải, dưới cùng và bên trái. Chỉ đường được phản chiếu khi sử dụng Bootstrap trong RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Và với HTML tùy chỉnh được thêm vào:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Với SVG:

Sass

Biến

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

Cách 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.

Kích hoạt chú giải công cụ qua JavaScript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Đánh dấu

Đánh dấu bắt buộc cho chú giải công cụ chỉ là một datathuộc tính và titletrên phần tử HTML mà bạn muốn có chú giải công cụ. Đánh dấu được tạo của chú giải công cụ khá đơn giản, mặc dù nó yêu cầu một vị trí (theo mặc định, được đặt thành topbởi plugin).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Các phần tử bị vô hiệu hóa

Các phần tử có disabledthuộc tính không tương tác, có nghĩa là người dùng không thể tập trung, di chuột hoặc nhấp vào chúng để kích hoạt chú giải công cụ (hoặc cửa sổ bật lên). Để giải quyết vấn đề này, bạn sẽ muốn kích hoạt chú giải công cụ từ một trình bao bọc <div>hoặc <span>lý tưởng là có thể lấy tiêu điểm bằng bàn phím tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Tùy chọn

Các tùy chọn có thể được chuyể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 data-bs-, như trong data-bs-animation="". Đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ, thay vì sử dụng data-bs-customClass="beautifier", hãy sử dụng data-bs-custom-class="beautifier".

Sử dụng chức năng vớipopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Phương pháp

buổi bieu diễn

Tiết lộ chú giải công cụ của một phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị (tức là trước khi shown.bs.tooltipsự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ. Chú giải công cụ có tiêu đề dài bằng 0 không bao giờ được hiển thị.

tooltip.show()

ẩn giấu

Ẩn chú giải công cụ của phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự bị ẩn (tức là trước khi hidden.bs.tooltipsự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.

tooltip.hide()

chuyển đổi

Chuyển đổi chú giải công cụ của phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị hoặc bị ẩn (nghĩa là trước khi sự kiện shown.bs.tooltiphoặc hidden.bs.tooltipsự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.

tooltip.toggle()

vứt bỏ

Ẩn và hủy chú giải công cụ của phần tử (Xóa dữ liệu được lưu trữ trên phần tử DOM). Chú giải công cụ sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selectorchọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con.

tooltip.dispose()

cho phép

Cung cấp cho chú giải công cụ của một phần tử khả năng được hiển thị. Chú giải công cụ được bật theo mặc định.

tooltip.enable()

vô hiệu hóa

Loại bỏ khả năng hiển thị chú giải công cụ của phần tử. Chú giải công cụ sẽ chỉ có thể được hiển thị nếu nó được bật lại.

tooltip.disable()

toggleEnabled

Chuyển đổi khả năng hiển thị hoặc ẩn chú giải công cụ của phần tử.

tooltip.toggleEnabled()

cập nhật

Cập nhật vị trí của chú giải công cụ của phần tử.

tooltip.update()

getInstance

Phương thức tĩnh cho phép bạn lấy phiên bản chú giải công cụ được liên kết với phần tử DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

Phương thức tĩnh cho phép bạn lấy phiên bản chú giải công cụ được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

Sự kiện

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()