Chú giải công cụ Bootstrap JS
Chú giải công cụ JS
Chú giải công cụ là một hộp bật lên nhỏ xuất hiện khi người dùng di chuyển con trỏ chuột qua một phần tử.
Để có hướng dẫn về Chú giải công cụ, hãy đọc Hướng dẫn Chú giải công cụ Bootstrap của chúng tôi .
Qua dữ liệu- * Thuộc tính
Kích data-toggle="tooltip"
hoạt chú giải công cụ.
Thuộc title
tính chỉ định văn bản sẽ được hiển thị bên trong chú giải công cụ.
Thí dụ
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Qua JavaScript
Chú giải công cụ không phải là plugin chỉ dành cho CSS và do đó phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi tooltip()
phương thức.
Thí dụ
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Tùy chọn chú giải công cụ
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-, như trong data-position = "".
Name | Type | Default | Description | Try it |
---|---|---|---|---|
animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
|
|
container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' |
|
delay | number, or object | 0 | Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it |
|
html | boolean | false | Specifies whether to accept HTML tags in the tooltip:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
|
placement | string | "top" | Specifies the tooltip position. Possible values:
|
|
selector | string, or the boolean false | false | Adds the tooltip to a specified selector | |
template | string | Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. |
||
title | string | "" | Specifies the text that should be displayed inside the tooltip | |
trigger | string | "hover focus" | Specifies how the tooltip is triggered. Possible values:
|
|
offset | number or a string | 0 | Offset of the tooltip relative to its target | |
fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
boundary | string or element | "scrollParent" | Overflow constraint boundary of the tooltip. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Phương pháp chú giải công cụ
Bảng sau liệt kê tất cả các phương pháp chú giải công cụ có sẵn.
Method | Description | Try it |
---|---|---|
.tooltip(options) | Activates the tooltip with an option. See options above for valid values | |
.tooltip("show") | Shows the tooltip | |
.tooltip("hide") | Hides the tooltip | |
.tooltip("toggle") | Toggles the tooltip | |
.tooltip("dispose") | Hides and destroys the tooltip |
Sự kiện chú giải công cụ
Bảng sau liệt kê tất cả các sự kiện chú giải công cụ có sẵn.
Event | Description | Try it |
---|---|---|
show.bs.tooltip | Occurs when the tooltip is about to be shown | |
shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | |
hide.bs.tooltip | Occurs when the tooltip is about to be hidden | |
hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) |