Css tùy chỉnh ngbtooltip

Kiểu dáng cho chú giải công cụ vẫn giống như kiểu dáng mặc định. Tôi đang làm việc trên Angular 7 với @ng-bootstrap phiên bản 4. 2. 2

Giải pháp tốt nhất

Dưới đây là ví dụ về lớp tùy chỉnh từ trang web ng-bootstrap. Liên kết đến stackblitz. liên kết

HTML


CSS

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}

Tôi hi vọng cái này giúp được

Cập nhật

Như Devin đã đề cập trong nhận xét, bạn phải thêm các kiểu tùy chỉnh vào biểu định kiểu chung của mình. Cảm ơn Devin

Giải pháp liên quan

Html – Cách sử dụng dấu xuống dòng trong chú giải công cụ HTML

Thông số kỹ thuật mới nhất cho phép ký tự nguồn cấp dữ liệu xuống dòng, do đó, ngắt dòng đơn giản bên trong thuộc tính hoặc thực thể


  Tooltip with HTML

9 (lưu ý rằng các ký tự
.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
00 và
.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
01 là bắt buộc) là được

Văn bản giữ chỗ để minh họa một số liên kết nội tuyến với chú giải công cụ. Điều này bây giờ chỉ là phụ, không có 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 điều đó chỉ để cung cấp cho bạn ý tưởng về cách 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 thực tế. Vì vậy, hy vọng bây giờ bạn đã thấy các chú giải công cụ về liên kết này có thể hoạt động như thế nào trong thực tế, sau khi bạn sử dụng chúng trên trang web hoặc dự án của riêng mình

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

Tooltip ở trên Tooltip ở bên phải Tooltip ở dưới Tooltip ở bên trái Tooltip với HTML


  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

ngổ ngáo

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)

Tràn

  Tooltip with HTML

0 và

  Tooltip with HTML

1

Vị trí chú giải công cụ cố gắng tự động thay đổi khi vùng chứa chính có


  Tooltip with HTML

2 hoặc

  Tooltip with HTML

3 giống như

  Tooltip with HTML

4 của chúng tôi, nhưng vẫn giữ nguyên vị trí của vị trí ban đầu. Để giải quyết vấn đề này, hãy đặt tùy chọn

  Tooltip with HTML

5 (đối với công cụ sửa đổi lật sử dụng tùy chọn

  Tooltip with HTML

6) thành bất kỳ HTMLElement nào để ghi đè giá trị mặc định,

  Tooltip with HTML

7, chẳng hạn như

  Tooltip with HTML

8

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
5

đánh dấu

Đánh dấu bắt buộc cho chú giải công cụ chỉ là thuộc tính


  Tooltip with HTML

9 và
$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 trê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 plugin đặ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;
1)

Làm cho chú giải công cụ hoạt động cho người dùng bàn phím và công nghệ hỗ trợ

Bạn chỉ nên thêm chú giải công cụ vào các phần tử HTML theo truyền thống có thể tập trung vào bàn phím và tương tác (chẳng hạn 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 ý (chẳng hạn như


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

8) có thể được đặt tiêu điểm 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;
3, điều này sẽ thêm các điểm dừng tab có khả năng gây khó chịu và khó hiểu trên các phần 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 thông báo chú giải công cụ 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;
4 làm trình kích hoạt cho chú giải công cụ của bạn, vì điều này sẽ khiến chú giải công cụ của bạn không thể kích hoạt đối với người dùng bàn phím


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

2

yếu tố bị vô hiệu hóa

Các phần tử có thuộc tính


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

6 không tương tá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). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt chú giải công cụ từ trình bao bọc

hoặc


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

8, lý tưởng nhất là có thể đặt tiêu điểm trên 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;
3


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

6

Tùy chọn

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 các thuộc tính dữ liệu, hãy thêm tên tùy chọn 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;
8, như trong
$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;
9. Đảm bảo thay đổi kiểu chữ hoa chữ thường 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
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
0, hãy sử dụng
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
1

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)
2,
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
3 và
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
4 không thể được cung cấp bằng thuộc tính dữ liệu

NameTypeDefaultDescription_______55boolean
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
6Áp dụng chuyển đổi mờ dần CSS cho tooltip
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
7string. yếu tố. sai_______58

Nối chú giải công cụ vào một phần tử cụ thể. Thí dụ.


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

4. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị chú giải công cụ trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn chú giải công cụ trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
50số. đối tượng
.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
51

Độ trễ hiển thị và ẩn chú giải công cụ (ms) - không áp dụng cho loại trình 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

Cấu trúc đối tượng là.

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
52

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
53boolean
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
8

Cho phép HTML trong tooltip

Nếu đúng, các thẻ HTML trong

$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 của chú giải công cụ sẽ được hiển thị trong chú giải công cụ. Nếu sai, thuộc tính
.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
56 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

.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
57chuỗi. chức năng
.my-custom-class .tooltip-inner {
  background-color: darkgreen;
  font-size: 125%;
}
.my-custom-class .arrow::before {
  border-top-color: darkgreen;
}
58

Cách định vị chú giải công cụ - tự động. đứng đầu. đáy. bên trái. bên phải.
Khi


  Tooltip with HTML

0 được chỉ định, nó sẽ tự động định hướng lại chú giải công cụ.

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM chú giải công cụ làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

20 được đặt thành phiên bản chú giải công cụ


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

21chuỗi. false
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
8Nếu bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này cũng được sử dụng để áp dụng các chú giải công cụ cho các phần tử DOM được thêm động (hỗ trợ ______223). Xem cái này và một ví dụ thông tin.

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

24chuỗi

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

25

HTML cơ sở để sử dụng khi tạo chú giải công cụ

Chú giải công cụ của

$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 sẽ được đưa vào

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

27


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

28 sẽ trở thành mũi tên của tooltip

Phần tử bao bọc ngoài cùng phải có lớp


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

29 và

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

60

$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 chuỗi. yếu tố. chức năng

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

62

Giá trị tiêu đề mặc định nếu không có 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;
0

Nếu một chức năng được cung cấp, nó sẽ được gọi với tham chiếu


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

20 của nó được đặt thành phần tử mà chú giải công cụ được đính kèm


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

65chuỗi

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

66

Cách chú giải công cụ được kích hoạt - nhấp. bay lượn. tiêu điểm. thủ công. Bạn có thể vượt qua nhiều trình kích hoạt;


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

67 chỉ ra rằng chú giải công cụ sẽ được kích hoạt theo chương trình thông qua các phương pháp

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

68,

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

69 và

  Tooltip with HTML

90;

Riêng


  Tooltip with HTML

91 sẽ dẫn đến các chú giải công cụ không thể được kích hoạt qua bàn phím và chỉ nên được sử dụng nếu có các phương pháp thay thế để truyền tải cùng một thông tin cho người dùng bàn phím


  Tooltip with HTML

92array

  Tooltip with HTML

93Xác định các vị trí dự phòng bằng cách cung cấp danh sách các vị trí trong mảng (theo thứ tự ưu tiên). Để biết thêm thông tin, hãy tham khảo tài liệu về hành vi của Popper

  Tooltip with HTML

5string. element

  Tooltip with HTML

7Ranh giới hạn chế tràn của chú giải công cụ (chỉ áp dụng cho công cụ sửa đổi preventOverflow của Popper). Theo mặc định, đó là

  Tooltip with HTML

7 và có thể chấp nhận tham chiếu HTMLElement (chỉ qua JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu detectOverflow của Popper.

  Tooltip with HTML

97chuỗi. chức năng

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

62

Thêm các lớp vào chú giải 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 cùng vớ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 bằng dấu cách.


  Tooltip with HTML

99

Bạn cũng có thể chuyển một hàm sẽ trả về một chuỗi chứa các tên lớp bổ sung

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
2boolean
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
6Bật hoặc tắt khử trùng. Nếu kích hoạt các tùy chọn

  Tooltip with HTML

12 và

  Tooltip with HTML

13 sẽ được khử trùng. Xem phần chất khử trùng trong tài liệu JavaScript của chúng tôi.
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
4đối tượngGiá trị mặc địnhĐối tượng chứa các thuộc tính và thẻ được phép
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
3null. chức năng

  Tooltip with HTML

16Tại đây bạn có thể cung cấp chức năng vệ sinh của riêng mình. Điều này có thể hữu ích nếu bạn muốn sử dụng thư viện chuyên dụng để thực hiện vệ sinh.

  Tooltip with HTML

17mảng. sợi dây. chức năng

  Tooltip with HTML

18

Độ lệch của chú giải công cụ so với mục tiêu của nó. Bạn có thể chuyển một chuỗi trong 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 with HTML

19

Khi một hàm được sử dụng để xác định độ lệch, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper rects làm đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được chuyển làm đối số thứ hai. Hàm phải trả về một mảng có hai số.


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

00

Để biết thêm thông tin tham khảo Popper's offset docs


  Tooltip with HTML

6null. sự vật. chức năng

  Tooltip with HTML

16

Để 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 chức năng đượ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 cấu hình 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

Thuộc tính dữ liệu cho các chú giải công cụ riêng lẻ

Ngoài ra, các tùy chọn cho chú giải công cụ riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên

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

  Tooltip with HTML

6


  Tooltip with HTML

9

phương pháp

Các phương thức 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 quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi 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ễ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ị (i. e. trước khi sự kiện


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

04 xảy ra). Đây được coi là 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ị

ẩn giấu

Ẩn 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ự bị ẩn (i. e. trước khi sự kiện


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

05 xảy ra). Đây được coi là kích hoạt “thủ công” của chú giải công cụ

chuyển đổi

Chuyển đổi 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ị hoặc ẩn (i. e. trước khi sự kiện


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

04 hoặc

  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

05 xảy ra). Đây được coi là kích hoạt “thủ công” của chú giải công cụ

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 tùy chọn


  Tooltip on top


  Tooltip on right


  Tooltip on bottom


  Tooltip on left

21) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con

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

vô hiệu hóa

Xóa 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

bật/tắtĐã bật

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

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

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 hoặc tạo một phần tử mới trong trường hợp nó không được khởi tạo