Thủ thuật CSS hiển thị ToolTip liên kết khi dê chuột vào link

Tweet

ToolTip là 1 cái tên gọi thể hiện hành động khi bạn dê chuột qua đối tượng sẽ hiển thị 1 chú thích. Với thủ thuật sẽ mang đến cho bạn đọc thêm cách nhìn mới về Website. Khi thiết kế Blogspot, có rất nhiều bạn hỏi tôi, có cách nào để hiển thị liên kết của 1 hình ảnh hay 1 đường link nào đây mà chúng ta không xem được. 





Bài viết hôm nay, ThaiAiTi.com sẽ giới thiệu cho bạn, được sử dụng 100% là CSS nên bạn hoàn toàn yên tâm về tốc độ và không ảnh hưởng tới mọi thứ xung quanh trên Template của bạn.

Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn CSS sau trên ]]></b:skin> 
(Dành cho người thiết kế Template Blogspot nhé)

.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}
*  Chúc bạn thực hiện thành công! Nếu thích nhớ nhấn Like nhé để tác giả có động lực chia sẻ nhiều hơn nữa và có giá trị.