<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/vn.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mb-4">
<label class="form-label fw-bold">Mức độ ưu tiên:</label>
<select id="priority" class="form-select my-popover"
title="Trợ giúp Ưu tiên"
data-bs-content="<b>Mức cao:</b> Xử lý trong 2h.<br><b>Mức thấp:</b> Xử lý trong 48h.">
<option value="">-- Chọn --</option>
<option value="high">Cao</option>
<option value="low">Thấp</option>
</select>
</div>
<div class="col-md-6 mb-4">
<label class="form-label fw-bold">Trạng thái dự án:</label>
<select id="status" class="form-select my-popover"
title="Trợ giúp Trạng thái"
data-bs-content="Lựa chọn trạng thái hiện tại để bộ phận quản lý theo dõi tiến độ chính xác nhất.">
<option value="">-- Chọn --</option>
<option value="open">Đang mở</option>
<option value="pending">Đang chờ</option>
</select>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<style>
/* Tùy chỉnh để Popover trông đẹp hơn */
.custom-popover {
--bs-popover-max-width: 300px;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-header-color: var(--bs-white);
}
.popover-body {
text-align: justify; /* Canh đều nội dung theo ý bạn */
}
</style>
$(document).ready(function() {
// 1. Khởi tạo tất cả các thành phần có class .my-popover
$('.my-popover').each(function() {
var element = this;
// Khởi tạo Popover cho từng thẻ và lưu vào instance của Bootstrap
var popover = new bootstrap.Popover(element, {
html: true,
trigger: 'manual', // Quan trọng để điều khiển bằng focus/blur
placement: 'top' // Có thể đổi thành 'bottom', 'right', 'left'
});
// 2. Gán sự kiện Focus (Hiện)
$(element).on('focus', function() {
popover.show();
});
// 3. Gán sự kiện Blur (Ẩn)
$(element).on('blur', function() {
popover.hide();
});
// 4. Gán sự kiện Change (Ẩn khi chọn xong)
$(element).on('change', function() {
popover.hide();
});
});
});