Tạo Tooltip Hiện Đại Tự Động Đổi Màu Theo Giao Diện Blog

Bước 2: Cài Đặt Mã Vanilla JS Xử Lý Thuật Toán Trượt & Nhận Diện Màu

Kéo xuống cuối trang mẫu HTML, tìm thẻ đóng </body> và dán đoạn mã này vào ngay phía trên nó:

<script> // <![CDATA[ document.addEventListener("DOMContentLoaded", function() { const tipTargets = document.querySelectorAll('a[rel~="tooltip"]'); tipTargets.forEach(target => { const tipContent = target.getAttribute('title'); if (!tipContent) return; // Đẩy nội dung vào biến data và xóa title để trình duyệt không hiện chú thích mặc định target.setAttribute('data-tip', tipContent); target.removeAttribute('title'); let tipBox; const showTip = () => { if (document.querySelector('.truc-tooltip-pro')) return; tipBox = document.createElement('div'); tipBox.className = 'truc-tooltip-pro'; tipBox.innerHTML = target.getAttribute('data-tip'); // THUẬT TOÁN HÚT MÀU: Lấy màu text của thẻ a đang hover để làm màu nền tooltip const targetColor = window.getComputedStyle(target).color; tipBox.style.setProperty('--tip-bg', targetColor); document.body.appendChild(tipBox); const targetRect = target.getBoundingClientRect(); const tipRect = tipBox.getBoundingClientRect(); let topPos = targetRect.top + window.scrollY - tipRect.height - 12; let leftPos = targetRect.left + window.scrollX + (targetRect.width / 2) - (tipRect.width / 2); // Chống tràn màn hình điện thoại if (leftPos < 10) leftPos = 10; if (leftPos + tipRect.width > window.innerWidth - 10) { leftPos = window.innerWidth - tipRect.width - 10; } if (topPos < window.scrollY + 10) { topPos = targetRect.bottom + window.scrollY + 12; tipBox.classList.add('bottom'); // Đảo mũi tên lên trên } tipBox.style.left = leftPos + 'px'; tipBox.style.top = topPos + 'px'; // Tạo độ trễ nhỏ để CSS Transition hoạt động mượt requestAnimationFrame(() => tipBox.classList.add('show')); }; const hideTip = () => { if (tipBox) { tipBox.classList.remove('show'); setTimeout(() => { if (tipBox && tipBox.parentNode) { tipBox.parentNode.removeChild(tipBox); } tipBox = null; }, 300); } }; // Chuột trên máy tính target.addEventListener('mouseenter', showTip); target.addEventListener('mouseleave', hideTip); // Chạm trên màn hình điện thoại target.addEventListener('touchstart', showTip, {passive: true}); target.addEventListener('touchend', () => setTimeout(hideTip, 2500)); }); }); // ]]> </script>

Bước 3: Cách Áp Dụng Chuyên Nghiệp Trong Bài Đăng

Khi soạn bài viết, bạn chuyển sang chế độ HTML và sử dụng cấu trúc thẻ <a> như sau. Lưu ý thuộc tính href="javascript:void(0);" giúp thẻ hoạt động như một vùng chứa chú thích mà không làm trình duyệt tải lại trang khi vô tình nhấp chuột.

Kiểu 1: Chú thích chữ thuần túy


<a href="javascript:void(0);" title="Màu nền của box này sẽ tự lấy theo màu chữ hiện tại" rel="tooltip">Chú thích thông thường</a>

Kiểu 2: Chú thích chứa định dạng HTML (In đậm, nghiêng)

<a href="javascript:void(0);" rel="tooltip" title="Nội dung này chứa chữ <strong>in đậm</strong> và <em>in nghiêng</em> rất rõ ràng.">Chú thích có định dạng</a>