Bài viết này sẽ trình bày chú giải công cụ bằng cách sử dụng JavaScript đơn giản.
Làm cách nào để tạo Chú giải công cụ JavaScript đơn giản?
Để tạo chú giải công cụ bằng JavaScript, hãy sử dụng “ Di chuột lên trên ' Và ' di chuột ra ngoài ' sự kiện. Thực hiện theo các ví dụ dưới đây để hiểu rõ hơn.
Ví dụ 1: Tooltip Sử dụng JavaScript
Trong ví dụ đã cho, chúng tôi sẽ tạo một chú giải công cụ bằng JavaScript thuần túy và cũng tạo kiểu cho chú giải công cụ bằng cách sử dụng “ phong cách ' thuộc tính.
Đầu tiên, tạo một văn bản nơi chúng tôi muốn hiển thị chú giải công cụ trong sự kiện di chuột qua:
< mã h5 = 'chữ' > Linux h5 >
Nhận văn bản nơi chú giải công cụ sẽ xuất hiện bằng cách sử dụng “ getElementById() ' phương pháp:
tôi ở đâu = tài liệu. getElementById ( 'chữ' ) ;
Bây giờ, hãy gọi “ addEventListener() ” phương thức bằng cách chuyển “ Di chuột lên trên ” sự kiện và một hàm() làm tham số. Trong chức năng được xác định, trước tiên, chúng tôi sẽ tạo chú giải công cụ bằng cách tạo một “ div ”, đặt văn bản sẽ được hiển thị khi di chuột và đặt một số kiểu dáng của chú giải công cụ bằng cách sử dụng “ phong cách ' thuộc tính. Cuối cùng, thêm chú giải công cụ bằng cách sử dụng “ appendChild() ' phương pháp:
lh. addEventListener ( 'Di chuột lên trên' , chức năng ( ) {là chú giải công cụ = tài liệu. tạo phần tử ( 'div' ) ;
chú giải công cụ. bên trongHTML = 'Một trang web tốt nhất để học các kỹ năng' ;
chú giải công cụ. phong cách . hiển thị = 'dễ thấy' ;
chú giải công cụ. phong cách . chức vụ = 'tuyệt đối' ;
chú giải công cụ. phong cách . màu nền = 'rgb(107, 101, 101)' ;
chú giải công cụ. phong cách . đệm = '5px' ;
chú giải công cụ. phong cách . bán kính biên giới = '3px' ;
chú giải công cụ. phong cách . màu sắc = 'trắng' ;
chú giải công cụ. phong cách . bên trái = 'năm mươi%' ;
chú giải công cụ. phong cách . chiều rộng = '200px' ;
tài liệu. thân hình . nối thêmTrẻ em ( chú giải công cụ ) ;
} ) ;
Tại đây, hãy sử dụng “ di chuột ra ngoài ” sự kiện sẽ xóa chú giải công cụ trong khi con trỏ sẽ rời khỏi văn bản:
lh. addEventListener ( 'chuột ra ngoài' , chức năng ( ) {
tài liệu. thân hình . loại bỏTrẻ em ( chú giải công cụ ) ;
} ) ;
đầu ra
Ví dụ 2: Tooltip Sử dụng JavaScript với CSS
Bạn cũng có thể tạo chú giải công cụ trong JavaScript bằng CSS.
Để làm như vậy, hãy tạo một khu vực để hiển thị văn bản của chú giải công cụ bằng cách sử dụng thẻ và gán một id “ #myTooltip ”:
< id nhịp = 'myTooltip' > nhịp >Nhận tài liệu tham khảo của văn bản và chú giải công cụ bằng cách sử dụng “ getElementById() ' phương pháp:
tôi ở đâu = tài liệu. getElementById ( 'chữ' ) ;là chú giải công cụ = tài liệu. getElementById ( 'myTooltip' ) ;
Gọi chú giải công cụ trên “ Di chuột lên trên ” sự kiện bằng cách đặt văn bản trong chức năng bằng cách sử dụng “ bên trongHTML ' tài sản:
lh. addEventListener ( 'Di chuột lên trên' , chức năng ( ) {chú giải công cụ. phong cách . hiển thị = 'dễ thấy' ;
chú giải công cụ. bên trongHTML = 'Một trang web tốt nhất để học các kỹ năng' ;
} ) ;
Ẩn chú giải công cụ trên “ di chuột ra ngoài ” sự kiện bằng cách thiết lập “ hiển thị ” tài sản để “ ẩn giấu ”:
lh. addEventListener ( 'chuột ra ngoài' , chức năng ( ) {chú giải công cụ. phong cách . hiển thị = 'ẩn giấu' ;
} ) ;
Tạo một id “ #myTooltip ” trong biểu định kiểu sẽ tạo kiểu cho chú giải công cụ:
#myTooltip {hiển thị : ẩn giấu ;
chiều rộng : 200px ;
Với - mục lục : 1 ;
lý lịch - màu sắc : rgb ( 107 , 101 , 101 ) ;
chữ - căn chỉnh : trung tâm ;
màu sắc : trắng ;
đệm : 5px 0 ;
ranh giới - bán kính : 3px ;
bên trái : năm mươi %;
}
Như bạn có thể thấy rằng chú giải công cụ đã được triển khai thành công trên văn bản:
Làm cách nào để tạo Chú giải công cụ bằng HTML và CSS?
Bạn cũng có thể tạo chú giải công cụ mà không cần JavaScript. Trong tệp HTML, hãy tạo văn bản “ Linux ”, chú giải công cụ sẽ được hiển thị khi di chuột vào đó. Tạo phần tử để đặt văn bản cho chú giải công cụ bên trong thẻ tiêu đề/văn bản :
Linux
< nhịp lớp học = 'văn bản chú giải công cụ' >
Một nền tảng để học các kỹ năng
nhịp >
h5 >
Trong biểu định kiểu, hãy tạo một lớp hoặc một id sẽ được gán cho các thành phần HTML. Ở đây, chúng ta sẽ tạo một lớp “ chú giải công cụ ” được gán cho tiêu đề:
. chú giải công cụ {chức vụ : liên quan đến ;
trưng bày : nội tuyến - khối ;
}
Định nghĩa một lớp “ chú giải công cụ ” để tạo kiểu cho văn bản của chú giải công cụ và gán cho nó HTML “ ' nhãn:
. chú giải công cụ {hiển thị : ẩn giấu ;
chiều rộng : 150px ;
lý lịch - màu sắc : rgb ( 107 , 101 , 101 ) ;
màu sắc : #fff ;
chữ - căn chỉnh : trung tâm ;
đệm : 5px 0 ;
ranh giới - bán kính : 3px ;
chức vụ : tuyệt đối ;
Với - mục lục : 1 ;
đáy : 125 %;
bên trái : năm mươi %;
lề - bên trái : - 60px ;
độ mờ đục : 0 ;
chuyển tiếp : độ mờ 0,3 giây ;
}
Bộ ' bay lượn ” hiệu ứng với “ chú giải công cụ ” để hiển thị chú giải công cụ trên hiệu ứng di chuột:
. chú giải công cụ : bay lượn . chú giải công cụ {hiển thị : dễ thấy ;
độ mờ đục : 1 ;
}
đầu ra
Chúng tôi đã biên soạn tất cả các hướng dẫn cần thiết liên quan đến chú giải công cụ JavaScript đơn giản.
Phần kết luận
Để tạo chú giải công cụ bằng JavaScript, hãy sử dụng “ Di chuột lên trên ' Và ' di chuột ra ngoài ” sự kiện, hiển thị chú giải công cụ khi di chuột trên phần tử và ẩn nó khi sự kiện di chuột ra được kích hoạt. Để tạo kiểu cho chú giải công cụ, hãy sử dụng “ phong cách ” thuộc tính trong JavaScript. Trong bài viết này, chúng tôi đã trình bày các ví dụ tốt nhất có thể về cách tạo chú giải công cụ bằng cách sử dụng JavaScript đơn giản, JavaScript có CSS và chú giải công cụ không có JavaScript.