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

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của Bootstrap Popovers. Đừng lo lắng nếu bạn là người mới bắt đầu; tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn mà tôi đã sử dụng trong lớp học trong nhiều năm. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể sử dụng popovers như một chuyên gia!

Bootstrap - Popovers

Popovers là gì?

Trước khi chúng ta bắt đầu, hãy hiểu.popovers là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách và có một dấu sao nhỏ bên cạnh một từ. Khi bạn nhìn xuống cuối trang, bạn sẽ thấy thêm thông tin về từ đó. Đó chính là điều mà một popover làm trên một trang web - nó cung cấp thêm thông tin khi người dùng tương tác với một phần tử.

Kích hoạt Popovers

Trước tiên, chúng ta cần kích hoạt popovers. Điều này giống như việc bạn bật đèn trước khi bạn bắt đầu đọc - bạn cần thiết lập trước khi bạn có thể sử dụng chúng.

Để kích hoạt popovers, bạn cần bao gồm các tệp JavaScript và CSS của Bootstrap trong tài liệu HTML của bạn. Dưới đây là cách bạn làm:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung của bạn ở đây -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

Mã này thiết lập cấu trúc cơ bản của một tài liệu HTML và bao gồm các tệp CSS và JavaScript của Bootstrap. đoạn mã ở cuối khởi tạo tất cả các popovers trên trang.

Tạo một Popover

Bây giờ chúng ta đã thiết lập xong, hãy tạo popover đầu tiên của chúng ta! Điều này đơn giản như việc thêm một vài thuộc tính vào một nút.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Tiêu đề Popover" data-bs-content="Và đây là một nội dung tuyệt vời. Nó rất cuốn hút. Phải không?">Nhấn để bật/tắt popover</button>

Hãy phân tích điều này:

class="btn btn-lg btn-danger": Điều này làm cho nút của chúng ta lớn và đỏ.
data-bs-toggle="popover": Điều này告诉 Bootstrap rằng phần tử này nên kích hoạt một popover.
title="Tiêu đề Popover": Điều này đặt tiêu đề cho popover của chúng ta.
data-bs-content="...": Đây là nội dung chính của popover của chúng ta.

Định vị Popover

Giống như việc sắp xếp nội thất trong một căn phòng, bạn có thể định vị popover của bạn theo nhiều cách khác nhau. Bootstrap cho phép bạn đặt popovers ở trên, phải, dưỡi hoặc bên trái của một phần tử.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover ở trên">
Popover ở trên
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover ở phải">
Popover ở phải
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover ở dưới">
Popover ở dưới
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover ở trái">
Popover ở trái
</button>

Thuộc tính data-bs-placement xác định vị trí xuất hiện của popover so với nút.

Popovers tùy chỉnh

Muốn thêm một touch cá nhân vào popovers của bạn? Bạn có thể tùy chỉnh chúng với nội dung HTML của riêng bạn!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Tiêu đề Tùy Chỉnh</h3>" data-bs-content="<b>Nét đậm</b> nội dung. <a href='#'>Liên kết</a> bao gồm.">
Popover HTML Tùy Chỉnh
</button>

Ở đây, chúng ta đã đặt data-bs-html="true" để cho phép HTML trong nội dung của popover. Bây giờ chúng ta có thể sử dụng các thẻ HTML trong tiêu đề và nội dung!

Popover không thể đóng

Đôi khi, bạn muốn popover của bạn ở lại cho đến khi người dùng rõ ràng đóng nó. Đó là lúc popovers không thể đóng phát huy tác dụng.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover không thể đóng" data-bs-content="Và đây là một nội dung tuyệt vời. Nó rất cuốn hút. Phải không?">Popover không thể đóng</a>

Chave ở đây là data-bs-trigger="focus". Điều này có nghĩa là popover sẽ mở cho đến khi người dùng nhấp vào một nơi khác trên trang.

Popover khi di chuột vào

Muốn popover xuất hiện khi người dùng di chuột vào một phần tử? Dễ như trở bàn tay!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Di chuột vào tôi!">
Di chuột vào để kích hoạt popover
</button>

Thuộc tính data-bs-trigger="hover" làm cho popover xuất hiện khi di chuột vào.

Popover 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 tương tác người dùng. Nhưng với một mẹo nhỏ, chúng ta có thể làm cho popovers hoạt động trên chúng!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Popover vô hiệu hóa">
<button class="btn btn-primary" type="button" disabled>Button vô hiệu hóa</button>
</span>

Chúng ta bao bọc nút vô hiệu hóa trong một <span> để xử lý việc kích hoạt popover.

Tùy chọn

Bootstrap cung cấp nhiều tùy chọn để tùy chỉnh popovers của bạn. Dưới đây là bảng một số tùy chọn phổ biến:

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

Bạn có thể sử dụng các tùy chọn này khi khởi tạo popovers với JavaScript:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

Và thế là xong! Bây giờ bạn đã trở thành một chuyên gia Bootstrap Popover. Nhớ rằng, chìa khóa để thành thạo này (và bất kỳ khái niệm lập trình nào khác) là thực hành. Vậy hãy đi nào, chơi với các ví dụ này, kết hợp chúng lại, và tạo ra điều gì đó tuyệt vời. Chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

Bootstrap - Placeholder

Hướng Dẫn Tiếp Theo:

Bootstrap - Thanh tiến trình