c-tooltip
CSS
Tiếp theo ta sẽ CSS cho thẻ HTML trên bằng cách sử dung ::after và ::before để tạo ra 1 hình chữ nhât đơn giản với nội dụng sử dụng data-c-tooltip trong thẻ HTML, và mũi tên phía dưới của tooltips.
data-c-tooltip]:after {
z-index: 1000;
padding: 8px;
width: 160px;
background-color: #000;
background-color: rgba[51, 51, 51, 0.9];
color: #fff;
content: attr[data-c-tooltip];
font-size: 14px;
line-height: 1.2;
}
[data-c-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
margin-left: -6px;
margin-bottom: -12px;
border-top-color: rgba[51, 51, 51, 0.9]
}
Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh: c-tooltip
CSS
[tooltip-position='left']:before,
[tooltip-position='left']:after {
right: 100%;
bottom: 50%;
left: auto;
}
[tooltip-position='left']:before {
margin-left: 0;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-left-color: #000;
border-left-color: rgba[51, 51, 51, 0.9];
}
[tooltip-position='left']:hover:before,
[tooltip-position='left']:hover:after,
[tooltip-position='left']:focus:before,
[tooltip-position='left']:focus:after {
-webkit-transform: translateX[-12px];
-moz-transform: translateX[-12px];
transform: translateX[-12px];
}
Tiếp theo ta sẽ CSS cho thẻ HTML trên bằng cách sử dung ::after và ::before để tạo ra 1 hình chữ nhât đơn giản với nội dụng sử dụng data-c-tooltip trong thẻ HTML, và mũi tên phía dưới của tooltips.
Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh:
Custom Tooltips
Ngoài ra ta có thể tao ra tooltips ở các vị trí khác nhau như trên, dưới, trái, phải bằng cách thêm attributes tooltip-position và css cho attributes đó
Cách để - Tooltip
Tìm hiểu cách tạo công cụ với CSS.
Di chuột qua văn bản dưới đây:
Hãy tự mình thử »
Thí dụ
Di chuột qua tôi & nbsp; Toàn bộ thông báo văn bản
Tooltip text