🧭Guided Tour cho trang web🧩

Đó là một pattern UI khá phổ biến gọi là “feature tour / guided tour / onboarding highlight” — kiểu hướng dẫn trực quan ngay trên giao diện web 👍

Nó thường làm 3 việc chính:

🧭 Cơ chế hoạt động

1. 🔦 Làm tối toàn bộ màn hình (overlay)

2. ✨ Highlight 1 vùng (element) cần chú ý

3. 👉 Hiện tooltip + con trỏ giả (fake cursor) để hướng dẫn thao tác

---

🧩 Cách người ta implement

⚙️ Cách 1: Dùng thư viện có sẵn (nhanh – chuẩn – đẹp)

Một số lib phổ biến:

• Intro.js

• Shepherd.js

• Driver.js

👉 Ví dụ dùng Driver.js (rất gọn):

<link rel="stylesheet" href="https://unpkg.com/driver.js@0.9.8/dist/driver.min.css">

	<script src="https://unpkg.com/driver.js@0.9.8/dist/driver.min.js"></script>
	
	<script>
		window.onload = function(){
		
		    const driver = new Driver();
		
		    driver.defineSteps([
		        {
		            element: '#btnLinks',
		            popover: {
		                title: 'Liên kết ngoài',
		                description: 'Click vào đây để vào hệ sinh thái',
		                position: 'bottom'
		            }
		        },
		        {
		            element: '#menuTienIch',
		            popover: {
		                title: 'Menu công cụ',
		                description: 'Apps thường dùng',
		                position: 'right'
		            }
		        }
		    ]);
		
		    driver.start();
		
		}
	</script>

👉 Ưu điểm:

• Không cần tự code overlay

• Có animation sẵn

• Có step-by-step logic

p/S: mình có demo trên trang chủ lophocvitinh.vn

---

⚙️ Cách 2: Tự code (pro hơn, control full)

Core idea:

🔲 Overlay + highlight

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  pointer-events: none;
}

.highlight {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.7);
  transition: all 0.3s ease;
}

📍 JS xác định vị trí element

const el = document.querySelector('#btnLogin');
const rect = el.getBoundingClientRect();

const highlight = document.querySelector('.highlight');

highlight.style.top = rect.top + 'px';
highlight.style.left = rect.left + 'px';
highlight.style.width = rect.width + 'px';
highlight.style.height = rect.height + 'px';

---

🖱️ Fake Cursor (nâng cao – giống demo xịn)

const cursor = document.createElement('div');
cursor.className = 'fake-cursor';
document.body.appendChild(cursor);

cursor.style.left = '100px';
cursor.style.top = '200px';

CSS:

.fake-cursor {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: fixed;
  z-index: 9999;
  animation: pulse 1s infinite;
}

---

🧠 Khi nào nên dùng

• Onboarding user mới 🆕

• Demo sản phẩm SaaS 💻

• Giới thiệu feature mới 🚀

• Landing page marketing

---

⚠️ Lưu ý thực chiến (quan trọng)

• ❌ Đừng spam quá nhiều step → user khó chịu

• ❌ Mobile phải test kỹ (viewport thay đổi)

• ✅ Cho phép skip

• ✅ Lưu trạng thái (localStorage: đã xem chưa)

---

🎯 Gợi ý

Nếu làm web app tài chính / dashboard:

👉 Dùng Driver.js là hợp lý nhất
→ nhẹ, dễ control, nhìn “pro” giống mấy SaaS lớn

Nếu muốn mình có thể:

• Viết 1 mini framework guided tour thuần JS

• Hoặc tích hợp luôn vào project CI3 của bạn

---

Nếu bạn muốn level cao hơn nữa 😏
→ mình có thể hướng dẫn làm kiểu:

🔥 Auto demo (cursor tự click + animation như video thật)
→ giống landing page của Stripe / Notion

---

✨ 𝓜𝓪𝓭𝓮 𝓫𝔂 𝓐𝓘 ✦ Crafted with logic & UI magic 🎯