Tạo tootip hiển thị hình ảnh hoặc nội dung khi rê chuột

Sử dụng đoạn code sau chèn vào vị trí cần hiển thị:

<a class="thumbnail" href="Lien%20ket%20web" ><span><img src="Lien%20ket%20hinh%20anh" /></span></a>

Sau đó chèn đoạn style sau vào file css của template:

/**/ .thumbnail{ position: relative; z-index: 0; }
.thumbnail span{ position: absolute; visibility: hidden; width: 400px; height: 400px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 0; margin-top: 120px; }

*Hoặc ó thể chèn đoạn style trên trực tiếp vào trang web như sau ( chèn vào trước thẻ đóng </head> ):

<style>
/**/ .thumbnail{ position: relative; z-index: 0; }
.thumbnail span{ position: absolute; visibility: hidden; width: 400px; height: 400px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 0; margin-top: 120px; }
</style>

Ngoài ra, nếu bạn am hiểu về code. Có thể tùy chỉnh theo ý của mình. Chúc thành công!

Kiến Thức Mẹo Vặt

You may also like...