Tạo chú thích trong bài viết với Tooltip CSS đơn giản

Tooltip CSS

Đôi khi có những đoạn code bạn muốn chú thích cho người xem nhưng muốn ẩn nó đi để cho gọn.

Bạn có thể dùng đến tooltip để chú giải. Nhiều khi khá phức tạp lại nặng nề nếu bạn dùng Javascript.

Thì nay bạn có thể sử dụng tooltip chỉ với một đoạn CSS đơn giản. Mời bạn xem qua Demo :


Đây là DemoTooltip với CSS

Download

Cách dùng cho blogger :

Bước 1:

Thêm CSS vào trong code của bạn : Dashbroad -> Mẫu -> Chỉnh sửa HTML

Thêm CSS sau trước ]]></b:skin>

span[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
span[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}
p[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
p[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}
b[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
b[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}
h3[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
h3[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}
h4[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
h4[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}
div[chuthich] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: auto;
}
div[chuthich]:hover::after {
content: attr(chuthich);
position: absolute;
left: 0;
top: 20px;
min-width: 200px;
border: 1px #aaaaaa solid;
background-color: #F4FAFF;
padding: 12px;
color: #000000;
font-size: 14px;
}

Bước 2:

Bước 2 để sử dụng khi viết bài bạn cần chỉnh sửa trong chế độ html. Ví dụ  bạn muốn chú thích cho một dòng nằm trong thẻ 

<p>Đây là ví dụ </p>

Nếu muốn chú thích cả một dòng như vậy : Bạn chỉ cần cho vào đó :

<p chuthich="Chú thích đây">Đây là ví dụ</p>

Nếu muốn chỉ chữ đây được gạch chân chú thích thì bạn dùng :

<p><span chuthich="chú thích chữ đây">Đây</span> là ví dụ </p>

Kết quả :

Đây là ví dụ

Ngoài thẻ <p> bạn có thể sử dụng với các thẻ khác như b, h3, h4, div, span. Bạn có thể tự thêm vào nếu muốn sử dụng nhiều hơn 

Cảm ơn bạn đã theo dõi bài viết. Vui lòng ghi lại nguồn erhay khi bạn phát hành thông tin từ trang này.