Chú giải công cụ JS Bootstrap
Chú giải công cụ JS (tooltip.js)
Plugin Tooltip 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ử.
Để biết hướng dẫn về Chú giải công cụ, hãy đọc Hướng dẫn về chú giải công cụ Bootstrap của chúng tôi.
Thông qua thuộc tính data-*
data-toggle="tooltip" kích hoạt chú giải công cụ.
Thuộc tính title chỉ định văn bản sẽ được hiển thị bên trong chú giải công cụ.
Thông qua JavaScript
Chú giải công cụ không phải là plugin chỉ có CSS và do đó phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức tooltip() .
Ví dụ
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Hãy tự mình thử »Tùy chọn chú giải công cụ
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-placement="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
|
Try it |
| container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' |
Try it |
| 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 |
Try 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 |
Try it |
| placement | string | "top" | Specifies the tooltip position. Possible values:
|
Try it |
| selector | string, or the boolean false | false | Adds the tooltip to a specified selector | Try it |
| 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 | Try it |
| trigger | string | "hover focus" | Specifies how the tooltip is triggered. Possible values:
|
Try it |
| viewport | string, or object | {selector: "body", padding: 0} | Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or {selector: '#viewport', padding: 0} |
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 | Try it |
| .tooltip("show") | Shows the tooltip | Try it |
| .tooltip("hide") | Hides the tooltip | Try it |
| .tooltip("toggle") | Toggles the tooltip | Try it |
| .tooltip("destroy") | Hides and destroys the tooltip | Try it |
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 | Try it |
| shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | Try it |
| hide.bs.tooltip | Occurs when the tooltip is about to be hidden | Try it |
| hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) | Try it |
Thêm ví dụ
Thiết kế chú giải công cụ tùy chỉnh
Sử dụng CSS để tùy chỉnh giao diện của chú giải công cụ:
Ví dụ
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
} Hãy tự mình thử »