Bootstrap - Tooltips: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của Bootstrap tooltips. Là một người giáo viên máy tính gần gũi, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần tiến lên. Vậy, hãy lấy một cốc cà phê (hoặc đồ uống yêu thích của bạn), và chúng ta cùng bắt đầu!

什么是 Tooltips?

Trước khi chúng ta đi vào chi tiết, hãy hiểu tooltips là gì. Bạn có bao giờ rê chuột qua một biểu tượng hoặc văn bản trên trang web và thấy một hộp thoại nhỏ với thông tin bổ sung không? Đó chính là tooltip! Chúng giống như những người giúp đỡ nhỏ bé, cung cấp thêm ngữ cảnh hoặc giải thích mà không làm rối loạn nội dung chính của bạn.

Bật Tooltips

Bây giờ, hãy cùng làm quen với một chút mã. Điều đầu tiên chúng ta cần làm là bật tooltips trong Bootstrap. Đừng lo lắng; nó dễ hơn bạn nghĩ!

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

Chuỗi mã nhỏ này告诉 Bootstrap, "Hey, chúng tôi muốn sử dụng tooltips trên trang này!" Nó giống như bật công tắc đèn trước khi bạn có thể nhìn thấy trong một căn phòng tối.

Tạo một Tooltip

Hãy tạo tooltip đầu tiên của chúng ta. Nó đơn giản như thêm một vài thuộc tính vào một phần tử HTML:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tôi là một tooltip!">
Kéo chuột lên tôi
</button>

Đây là những gì đang xảy ra:

• Chúng ta đang tạo một nút sử dụng các lớp btn và btn-secondary của Bootstrap.
• data-toggle="tooltip"告诉 Bootstrap rằng phần tử này nên có một tooltip.
• title="Tôi là một tooltip!" là văn bản sẽ xuất hiện trong tooltip của chúng ta.

Khi bạn rê chuột lên nút này, bạn sẽ thấy "Tôi là một tooltip!" xuất hiện. Thật kỳ diệu, phải không?

Tooltips trên Liên kết

Tooltips không chỉ dành cho nút. Hãy thêm một tooltip vào một liên kết:

<a href="#" data-toggle="tooltip" title="Nhấp vào tôi để đi đến một nơi khác!">Kéo chuột lên liên kết này</a>

Cách này hoạt động tương tự như ví dụ nút của chúng ta. Khi bạn rê chuột lên liên kết, bạn sẽ thấy thông báo tooltip.

Tooltips Tùy chỉnh

Bây giờ, hãy làm cho tooltip của chúng ta trở nên thú vị hơn. Chúng ta có thể tùy chỉnh tooltips để làm cho chúng hấp dẫn hơn:

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Kéo chuột để xem tooltip HTML
</button>

Trong ví dụ này, chúng ta đã thêm data-html="true" để cho phép HTML trong tooltip. Bây giờ chúng ta có thể sử dụng các thẻ như <em>, <u>, và <b> để định dạng văn bản tooltip.

Vị trí của Tooltip

Chúng ta có thể kiểm soát vị trí xuất hiện của tooltip so với phần tử của chúng ta. Hãy thử tất cả bốn vị trí:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip trên">
Tooltip trên
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip bên phải">
Tooltip bên phải
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip dưới">
Tooltip dưới
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip bên trái">
Tooltip bên trái
</button>

Thuộc tính data-placement告诉 Bootstrap vị trí để đặt tooltip. Nó giống như chỉ định bạn bạn nên đứng ở đâu để chụp ảnh!

Tooltip với HTML Tùy chỉnh

Nhớ lại khi chúng ta启用 HTML trong tooltip trước đó? Hãy đi sâu hơn một bước:

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-html="true"
title="<h3>Custom Header</h3><p>This is a paragraph.</p><img src='smiley.gif' alt='Smiley face'>">
Kéo chuột để có bất ngờ!
</button>

Tooltip này bao gồm một tiêu đề, một đoạn văn và thậm chí cả một hình ảnh! Nó giống như một trang web nhỏ trong tooltip của bạn.

Định dạng

Đôi khi, bạn có thể muốn kiểm soát nhiều hơn về cấu trúc của tooltip. Đó là khi custom markup ra vào:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' title="Tooltip tùy chỉnh">
Định dạng tooltip tùy chỉnh
</button>

Ví dụ này sử dụng thuộc tính data-template để xác định cấu trúc tùy chỉnh cho tooltip của chúng ta. Nó giống như xây dựng một ngôi nhà thay vì mua một ngôi nhà đã có sẵn!

Tooltip trên Phần tử Vô hiệu hóa

Thường thì các phần tử vô hiệu hóa không kích hoạt các tương tác người dùng. Nhưng với một chút thủ thuật, chúng ta có thể làm cho tooltips hoạt động trên chúng:

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Tooltip vô hiệu hóa">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Vô hiệu hóa nút</button>
</span>

Chúng ta đang bao bọc nút vô hiệu hóa trong một span có thể nhận focus. Nó giống như đưa một người giúp đỡ cho ai đó không thể với tới kệ cao!

Tùy chọn

Cuối cùng, hãy xem xét một số tùy chọn chúng ta có thể sử dụng để tùy chỉnh tooltips của mình thêm nữa:

Tùy chọn	Kiểu	Mặc định	Mô tả
animation	boolean	true	Áp dụng hiệu ứng CSS fade vào tooltip
container	string | false	false	Thêm tooltip vào một phần tử cụ thể
delay	number | object	0	Độ trễ hiển thị và ẩn tooltip (ms)
html	boolean	false	Cho phép HTML trong tooltip
placement	string | function	'top'	Cách đặt tooltip
selector	string	false	Nếu cung cấp một selector, các đối tượng tooltip sẽ được ủy quyền cho các mục tiêu được chỉ định
template	string	<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>	HTML cơ bản để sử dụng khi tạo tooltip
title	string | element | function	''	Giá trị tiêu đề mặc định nếu thuộc tính title không có
trigger	string	'hover focus'	Cách kích hoạt tooltip - click | hover | focus | manual

Bạn có thể sử dụng các tùy chọn này khi khởi tạo tooltips của bạn:

$('#example').tooltip({
animation: false,
delay: { "show": 500, "hide": 100 },
placement: 'right'
});

Chuỗi mã này tắt hiệu ứng fade, thêm độ trễ và đặt tooltip ở bên phải của phần tử.

Và thế là xong! Bạn đã chính thức bước vào thế giới của Bootstrap tooltips. Nhớ rằng, chìa khóa để thành thạo điều này (và bất kỳ khái niệm mã hóa nào) là thực hành. Hãy thử tạo một trang web và thêm các loại tooltips khác nhau vào đó. Thử nghiệm với các tùy chọn và xem bạn có thể tạo ra điều gì.

Trước khi bạn biết, bạn sẽ trở thành master của tooltip, và các trang web của bạn sẽ trở nên thông tin và tương tác hơn! Chúc mừng bạn, và đừng quên vui vẻ trên đường đi!

Credits: Image by storyset