Chú giải công cụ
Thành phần công cụ là 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ách tạo một chú giải công cụ
Để tạo một chú giải công cụ, hãy thêm thuộc tính
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
1 vào một phần tử.Sử dụng thuộc tính
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
2 để chỉ định văn bản sẽ được hiển thị bên trong Tooltip:Di chuột qua tôi!
Lưu ý: Tooltips phải được khởi tạo với JavaScript để hoạt động. Tooltips must be initialized with JavaScript to work.
Mã sau sẽ cho phép tất cả các chú giải công cụ trong tài liệu:
Thí dụ
var toolTipTriggerList = [] .slice.call [document.querySelectorall ['[data-bs-toggle = "toolTip"]']] ]}]
var tooltipTriggerList = [].slice.call[document.querySelectorAll['[data-bs-toggle="tooltip"]']]
var tooltipList = tooltipTriggerList.map[function [tooltipTriggerEl] {
return new bootstrap.Tooltip[tooltipTriggerEl]
}]
Hãy tự mình thử »
Bộ công cụ định vị
Theo mặc định, ToolTip sẽ xuất hiện trên đầu phần tử.
Sử dụng thuộc tính
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
3 để đặt vị trí của chú giải công cụ ở trên cùng, dưới, bên trái hoặc bên phải của phần tử:Thí dụ
var toolTipTriggerList = [] .slice.call [document.querySelectorall ['[data-bs-toggle = "toolTip"]']] ]}]
Hover
Hover
Hover
Hãy tự mình thử »
Tổng quan
Những điều cần biết khi sử dụng plugin Tooltip:
- Tooltips dựa vào thư viện thứ 3 Popper để định vị. Bạn phải bao gồm popper.min.js trước bootstrap.js hoặc sử dụng
4 /Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left
5 có chứa popper để các chú giải công cụ hoạt động!Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left
- Tooltips là 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.you must initialize them yourself.
- Tooltips với các tiêu đề không có độ dài không bao giờ được hiển thị.
- Chỉ định
6 để tránh đưa ra các vấn đề trong các thành phần phức tạp hơn [như các nhóm đầu vào của chúng tôi, nhóm nút, v.v.].Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left
- Kích hoạt các chú giải công cụ trên các yếu tố ẩn sẽ không hoạt động.
- Các chú giải công cụ cho các phần tử
7 hoặcTooltip on top Tooltip on right Tooltip on bottom Tooltip on left
8 phải được kích hoạt trên phần tử trình bao bọc.Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left
- Khi được kích hoạt từ các siêu liên kết trải dài nhiều dòng, các chú giải công cụ sẽ được tập trung. Sử dụng
9 trênTooltip on top Tooltip on right Tooltip on bottom Tooltip on left
0 của bạn để tránh hành vi này.Tooltip with HTML
- Tooltips phải được ẩn trước khi các yếu tố tương ứng của chúng đã bị xóa khỏi DOM.
- Tooltips có thể được kích hoạt nhờ một phần tử bên trong Dom Shadow.
Theo mặc định, thành phần này sử dụng chất khử trùng nội dung tích hợp, loại bỏ bất kỳ phần tử HTML nào không được phép rõ ràng. Xem phần Vệ sinh trong tài liệu JavaScript của chúng tôi để biết thêm chi tiết.
Có tất cả những thứ đó? Tuyệt vời, hãy để xem cách họ làm việc với một số ví dụ.
Một cách để khởi tạo tất cả các chú giải công cụ trên một trang sẽ là chọn chúng bằng thuộc tính
Tooltip with HTML
1 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]
}]
Ví dụ
Di chuột qua các liên kết bên dưới để xem chú giải công cụ:
Văn bản giữ chỗ để chứng minh một số liên kết nội tuyến với các chú giải công cụ. Đây chỉ là chất độn, không kẻ giết người. Nội dung được đặt ở đây chỉ để bắt chước sự hiện diện của văn bản thực. Và tất cả những gì chỉ để cung cấp cho bạn một ý tưởng về cách các chú giải công cụ sẽ trông như thế nào khi được sử dụng trong các tình huống trong thế giới thực. Vì vậy, hy vọng bây giờ bạn đã thấy làm thế nào các công cụ này trên các liên kết có thể hoạt động trong thực tế, một khi bạn sử dụng chúng trên trang web hoặc dự án của riêng bạn.
Di chuột qua các nút bên dưới để xem bốn hướng dẫn của Tooltips: trên cùng, phải, dưới cùng và bên trái. Hướng dẫn được nhân đôi khi sử dụng bootstrap trong RTL.
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Và với HTML tùy chỉnh được thêm vào:
Tooltip with HTML
Với một 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 Tooltip tạo nội dung và đánh dấu theo yêu cầu và theo các công cụ mặc định là 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ụ thông qua JavaScript:
var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
Tràn
Tooltip with HTML
2 và
Tooltip with HTML
3Vị trí của Tooltip cố gắng tự động thay đổi khi container gốc có
Tooltip with HTML
4 hoặc
Tooltip with HTML
5 như
Tooltip with HTML
6 của chúng tôi, nhưng vẫn giữ vị trí đặt vị trí ban đầu. Để giải quyết điều này, hãy đặt tùy chọn
Tooltip with HTML
7 [cho công cụ sửa đổi lật bằng tùy chọn
Tooltip with HTML
8] thành bất kỳ htmlelement nào để ghi đè giá trị mặc định,
Tooltip with HTML
9, chẳng hạn như $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;
0:parent container has
Tooltip with HTML
4 or
Tooltip with HTML
5 like our
Tooltip with HTML
6, but still keeps the original placement’s positioning. To resolve this, set the
Tooltip with HTML
7 option [for the flip modifier using the
Tooltip with HTML
8 option] to any HTMLElement to override the default value,
Tooltip with HTML
9, such as $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;
0: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 một công cụ chỉ là thuộc tính
$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;
1 và
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
2 trên phần tử HTML bạn muốn có một chú giải công cụ. Đánh dấu được tạo của một 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 $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;
3 bởi plugin].Làm công cụ hoạt động cho bàn phím và người dùng công nghệ hỗ trợ
Bạn chỉ nên thêm các chú giải công cụ vào các phần tử HTML có thể tập trung và tương tác với bàn phím truyền thống [như liên kết hoặc điều khiển biểu mẫu]. Mặc dù các phần tử HTML tùy ý [như
$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;
4] có thể được tập trung bằng cách thêm thuộc tính $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;
5, điều này sẽ thêm Tab gây khó chịu và khó hiểu dừng các yếu tố không tương tác cho người dùng bàn phím và hầu hết các công nghệ hỗ trợ hiện không công bố công cụ này trong tình huống này trong tình huống này trong tình huống này trong tình huống này trong tình huống này . Ngoài ra, không chỉ dựa vào $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;
6 vì trình kích hoạt cho chú giải công cụ của bạn, vì điều này sẽ làm cho chú giải công cụ của bạn không thể kích hoạt cho người dùng bàn phím.
Hover over me
Some tooltip text!
Các yếu tố bị vô hiệu hóa
Các yếu tố với thuộc tính
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
8 aren 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 một chú giải công cụ [hoặc popover]. Là một cách giải quyết, bạn sẽ muốn kích hoạt chú giải công cụ từ trình bao bọc $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;
8 hoặc $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;
4, lý tưởng là tập trung vào bàn phím bằng cách sử dụng $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;
5.Tùy chọn
Các tùy chọn có thể được truyề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
var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
1, như trong var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
2. Đảm bảo thay đổi loại trường hợp của tên tùy chọn từ Camelcase sang trường hợp kebab khi chuyển các tùy chọn thông qua các thuộc tính dữ liệu. Ví dụ: thay vì sử dụng var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
3, sử dụng var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
4.Lưu ý rằng vì lý do bảo mật, các tùy chọn
var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
5, var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
6 và var exampleEl = document.getElementById['example']
var tooltip = new bootstrap.Tooltip[exampleEl, options]
7 không thể được cung cấp bằng các thuộc tính dữ liệu.
8 | Boolean | 9 | Áp dụng quá trình chuyển đổi Fade CSS vào Tooltip |
0 | Chuỗi | yếu tố | sai | 1 | Lối nhiều công cụ vào một yếu tố cụ thể. Ví dụ: 6. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị chú giải công cụ trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn công cụ giải thoát khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ.
|
3 | Số | sự vật | 4 | Trì hoãn hiển thị và ẩn Tooltip [MS] - 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 thị Cấu trúc đối tượng là: 5
|
6 | Boolean | 1 | Lối nhiều công cụ vào một yếu tố cụ thể. Ví dụ: 6. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị chú giải công cụ trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn công cụ giải thoát khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ. 3Số | sự vật |
4 | Trì hoãn hiển thị và ẩn Tooltip [MS] - 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 thị | Cấu trúc đối tượng là: 5When 2 is specified, it will dynamically reorient the tooltip. 6
|
Cho phép HTML trong Tooltip. | Nếu đúng, các thẻ HTML trong Tooltip của 2 sẽ được hiển thị trong Tooltip. Nếu sai, thuộc tính 9 sẽ được sử dụng để chèn nội dung vào DOM. | 1 | Lối nhiều công cụ vào một yếu tố cụ thể. Ví dụ: 6. Tùy chọn này đặc biệt hữu ích ở chỗ nó cho phép bạn định vị chú giải công cụ trong luồng của tài liệu gần phần tử kích hoạt -& nbsp; sẽ ngăn công cụ giải thoát khỏi phần tử kích hoạt trong quá trình thay đổi kích thước cửa sổ. |
3 | Số | sự vật | 4 | Trì hoãn hiển thị và ẩn Tooltip [MS] - 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 thị Cấu trúc đối tượng là: 5 6
|
Cho phép HTML trong Tooltip. | Nếu đúng, các thẻ HTML trong Tooltip của 2 sẽ được hiển thị trong Tooltip. Nếu sai, thuộc tính 9 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. | 0Chuỗi | hàm số |
1 | Số | sự vật | 4 | Trì hoãn hiển thị và ẩn Tooltip [MS] - 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 thị Cấu trúc đối tượng là: 5
|
6 | Cho phép HTML trong Tooltip. | Nếu đúng, các thẻ HTML trong Tooltip của 2 sẽ được hiển thị trong Tooltip. Nếu sai, thuộc tính 9 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. |
0 | Chuỗi | hàm số | 9 | Ranh giới ràng buộc Overflow của ToolTip [chỉ áp dụng cho công cụ sửa đổi phòng ngừa của Popper]. Theo mặc định, đó là 9 và có thể chấp nhận tham chiếu htmlelement [chỉ thông qua JavaScript]. Để biết thêm thông tin, hãy tham khảo các tài liệu phát hiện của Popper. |
0 | Chuỗi | hàm số | 5 | Thêm các lớp vào công cụ khi nó được hiển thị. Lưu ý rằng các lớp này sẽ được thêm vào ngoài bất kỳ lớp nào được chỉ định trong mẫu. Để thêm nhiều lớp, hãy tách chúng ra với khoảng trống: 2.Bạn cũng có thể vượt qua một hàm sẽ trả về một chuỗi duy nhất chứa tên lớp bổ sung. |
5 | Boolean | 9 | Bật hoặc vô hiệu hóa quá trình vệ sinh. Nếu các tùy chọn được kích hoạt 5 và 6 sẽ được vệ sinh. Xem phần Vệ sinh trong tài liệu JavaScript của chúng tôi. |
7 | sự vật | Giá trị mặc định | Đối tượng chứa các thuộc tính và thẻ được phép |
6 | null | hàm số | 9 | Ở đây bạn có thể cung cấp chức năng vệ sinh của riêng bạn. Điều này có thể hữu ích nếu bạn thích sử dụng một thư viện chuyên dụng để thực hiện vệ sinh. |
00 | Mảng | Chuỗi | hàm số | 01 | Offset của ToolTip so với mục tiêu của nó. Bạn có thể truyền một chuỗi trong các thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như: 02Khi một hàm được sử dụng để xác định phần bù, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper là đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được truyền dưới dạng đối số thứ hai. Hàm phải trả về một mảng với hai số: 03.Để biết thêm thông tin, hãy tham khảo các tài liệu bù của Popper. |
8 | null | đối tượng | hàm số | 9 | Ở đây bạn có thể cung cấp chức năng vệ sinh của riêng bạn. Điều này có thể hữu ích nếu bạn thích sử dụng một thư viện chuyên dụng để thực hiện vệ sinh. 00
|
Mảng | Chuỗi | hàm số
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
01Offset của ToolTip so với mục tiêu của nó. Bạn có thể truyền một chuỗi trong các thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như:
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
02
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
var tooltip = new bootstrap.Tooltip[element, {
popperConfig: function [defaultBsPopperConfig] {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
}]
Khi một hàm được sử dụng để xác định phần bù, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper là đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được truyền dưới dạng đối số thứ hai. Hàm phải trả về một mảng với hai số:
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
03.
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Để biết thêm thông tin, hãy tham khảo các tài liệu bù của Popper.
Tooltip with HTML
8asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.null | đối tượng | hàm số
Để thay đổi cấu hình popper mặc định của Bootstrap, hãy xem cấu hình của Popper.
Khi một hàm được sử dụng để tạo cấu hình popper, nó được gọi với một đối tượng chứa cấu hình popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho popper.Returns to the caller before the tooltip has actually been shown [i.e. before the
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
07 event occurs]. This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.Thuộc tính dữ liệu cho các công cụ riêng lẻ
Các tùy chọn cho các công cụ riêng lẻ có thể được chỉ định thay thế thông qua việc sử dụng các thuộc tính dữ liệu, như được giải thích ở trên.Returns to the caller before the tooltip has actually been hidden [i.e. before the
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
08 event occurs]. This is considered a “manual” triggering of the tooltip.Sử dụng chức năng với
Tooltip with HTML
8
Tooltip with HTML
Phương phápReturns to the caller before the tooltip has actually been shown or hidden [i.e. before the
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
07 or
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
08 event occurs]. This is considered a “manual” triggering of the tooltip.Phương pháp và chuyển tiếp không đồng bộ
Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi. Họ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.
buổi bieu diễnTooltips are enabled by default.
Tiết lộ một bộ công cụ yếu tố. Trả về cho người gọi trước khi chú giải công cụ thực sự được hiển thị [nghĩa là trước khi sự kiện
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
07 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt công cụ. Tooltips với các tiêu đề không có độ dài không bao giờ được hiển thị.
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
ẩn giấu
Ẩn một bộ công cụ yếu tố. Trả về cho người gọi trước khi chú giải công cụ thực sự bị ẩn [nghĩa là trước khi sự kiện
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
08 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt công cụ.
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Chuyển đổi
Bật một bộ công cụ phần tử. Trả về cho người gọi trước khi chú giải công cụ thực sự được hiển thị hoặc ẩn [nghĩa là trước khi sự kiện
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
07 hoặc
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
08 xảy ra]. Đây được coi là một hướng dẫn sử dụng của người Viking kích hoạt công cụ.
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
Vứt bỏ
Ẩn và phá hủy một bộ công cụ phần tử [loại bỏ dữ liệu được lưu trữ trên phần tử DOM]. Các chú giải công cụ sử dụng ủy quyền [được tạo bằng tùy chọn
Hover over me
Some tooltip text!
4] không thể bị phá hủy riêng lẻ trên các yếu tố kích hoạt hậu duệ.
Hover over me
Some tooltip text!
cho phép
var exampleTriggerEl = document.getElementById['example']
var tooltip = bootstrap.Tooltip.getInstance[exampleTriggerEl] // Returns a Bootstrap tooltip instance
Cung cấp cho một bộ công cụ của phần tử khả năng được hiển thị. Tooltips được bật theo mặc định.
vô hiệu hóa
var exampleTriggerEl = document.getElementById['example']
var tooltip = bootstrap.Tooltip.getOrCreateInstance[exampleTriggerEl] // Returns a Bootstrap tooltip instance
Loại bỏ khả năng cho một bộ công cụ phần tử được hiển thị. ToolTip sẽ chỉ có thể được hiển thị nếu nó được kích hoạt lại.
cập nhật | Cập nhật vị trí của một bộ công cụ phần tử. |
getinstance | Phương thức tĩnh cho phép bạn có được phiên bản công cụ được liên kết với phần tử DOM |
getorcreateInstance | Phương thức tĩnh cho phép bạn có thể nhận được phiên bản 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ó không được khởi tạo |
Sự kiện | Loại sự kiện |
Sự mô tả | 12 |
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
0