Cách tạo Chú giải công cụ với Bootstrap

Trong HTML, chúng ta có thể thêm thuộc tính tiêu đề cho một phần tử. Văn bản được chỉ định trong thuộc tính này được hiển thị dưới dạng chú giải công cụ trên sự kiện di chuột qua. Trong hướng dẫn này, chúng ta sẽ tạo chú giải công cụ bằng cách sử dụng Bootstrap và nó có các tính năng bổ sung tốt so với chú giải công cụ tiêu chuẩn.

Chúng tôi khởi tạo chú giải công cụ Bootstrap bằng cách tham chiếu bộ chọn id phần tử mà chức năng chú giải công cụ sẽ được kích hoạt. Trong hướng dẫn trước, chúng ta đã biết cách hiển thị thông báo xác thực biểu mẫu bằng chú giải công cụ.

Thư viện chú giải công cụ Bootstrap chứa một số tùy chọn để tùy chỉnh kiểu chú giải công cụ, tốc độ, nội dung và hơn thế nữa. Chúng tôi có thể ghi đè các tùy chọn mặc định bằng cách đặt chúng trong khi gọi hàm chú giải công cụ.

Trong ví dụ này, tôi đặt trì hoãn thời gian cho hiệu ứng hoạt ảnh và chức vụ tùy chọn với JavaScript. Nếu không có thuộc tính title nào được chỉ định hoặc nó trống thì tiêu đề được chỉ định trong JavaScript sẽ được hiển thị trong chú giải công cụ.

Xem Demo

Chú giải công cụ kích hoạt phần tử HTML

Đoạn mã hiển thị các phần tử HTML mà hàm thư viện chú giải công cụ được gọi trong sự kiện di chuột qua. Nó hiển thị bốn phần tử DIV kích hoạt chú giải công cụ khi di chuột bằng cách chỉ định vị trí đặt chú giải công cụ bằng cách sử dụng thuộc tính dữ liệu.

<div class="tooltip-buttons">
	<div class="btnTooltip" data-placement="top" title="Tooltip showing in the top position.">Top</div>
	<div class="btnTooltip" data-placement="right">Right</div>
	<div class="btnTooltip" data-placement="bottom">Bottom</div>
	<div class="btnTooltip" data-placement="left" title="Tooltip showing in the left position.">Left</div>
</div>

jQuery Script để gọi Bootstrap Tooltip

Đoạn mã jQuery sau đây cho thấy cách kích hoạt chú giải công cụ bằng cách chỉ định các tùy chọn làm đối số của nó. Tôi chỉ định độ trễ và tiêu đề mặc định sẽ được sử dụng nếu tiêu đề phần tử trống. Các chức vụ tùy chọn bao gồm nội dung HTML. Mã HTML được phép trong chú giải công cụ nếu tùy chọn html được đặt là đúng.

<script type="text/javascript">
$(document).ready(function(){
    $('.btnTooltip').tooltip({
		delay: { "show": 500, "hide": 100 },
		title:"<strong class="txt-highlight">Title is from the JavaScript</strong> as given as the Tooltip options.",
		html:true,
	});   
});
</script>

Bảng sau đây cho thấy một số tùy chọn khác của hàm thư viện chú giải công cụ và giá trị mặc định của nó.

Đầu ra

Ảnh chụp màn hình sau đây hiển thị cửa sổ bật lên chú giải công cụ cho phần tử có thuộc tính tiêu đề. Nó cũng hiển thị chú giải công cụ với văn bản được chỉ định trong JavaScript cho phần tử không có thuộc tính title

Xem DemoTải xuống

Bootstrap.js

Giới thiệu nhanh về bootstrap.js cho những ai chưa biết về nó. Bootstrap cung cấp hơn một chục plugin jQuery tùy chỉnh và nó bổ sung cho các thành phần của Bootstrap.

Tất cả các plugin đó đều có trong bootstrap.js hoặc bạn chỉ có thể chọn các plugin mà bạn yêu cầu và tải xuống bootstrap.js tùy chỉnh. Các plugin jQuery của Bootstrap đó có jQuery và một số thư viện khác.

Kiểm tra tài liệu plugin riêng lẻ để biết về chúng. Trong hướng dẫn này, tôi đã sử dụng plugin bootstrap.js.

↑ Quay lại đầu trang