Hướng dẫn tooltip html - html chú giải công cụ
|
Tooltip thường được sử dụng để mô tả cho một nút bấm, một thẻ input hay một liên kết dạng menu .v.v. Trong bài viết này mình sẽ hướng dẫn các bạn tạo Tooltip đơn giản với CSS.  Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Các bạn cùng xem ví dụ dưới đây: 1. Xây dựng giao diệnĐầu tiên là xây dựng giao diện, các bạn tạo các tooltip bằng các thẻ div như sau: Code
2. Định dạng CSSGiờ chúng ta sẽ định dạng để chúng dễ nhìn hơn nhé, các bạn dán đoạn mã sau vào bên trong thẻ style: body {
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin: auto;
width: 150px;
height: 35px;
line-height: 35px;
background: yellow;
display: block;
margin-top: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip-top {
bottom: 120%;
left: 10%;
}
.tooltip-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip-right {
left: 110%;
top: 7%;
}
.tooltip-right::after{
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #555 transparent transparent;
}
.tooltip-bottom {
top: 120%;
left: 10%;
}
.tooltip .tooltip-bottom::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #555 transparent;
}
.tooltip-left {
right: 110%;
top: -10%;
}
.tooltip-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #555;
} Trong phần định dạng trên, các mã CSS đều khá cơ bản, các bạn lưu ý phần Bài viết này được đăng tại [free tuts .net] 3. Lời KếtVậy là mình đã cùng các bạn xây dựng xong chức năng tooltip cơ bản, nếu có thắc mắc gì các bạn có thể để lại dưới phần bình luận, hẹn gặp lại các bạn trong các bài viết sau. Đã đăng vào thg 2 20, 2019 1:16 SA 2 phút đọc 2 phút đọc Giới thiệuTooltips là chú thích tuyệt vời để bổ sung và làm phong phú trải nghiệm người dùng cung cấp gợi ý và thêm thông tin cho người dùng. Có rất nhiều plugin JavaScript cung cấp chức năng này, nhưng nếu bạn không muốn sử dụng các thư viện đó, thì có thể xử lý nó chỉ bằng cách sử dụng sử dụng data attributes của HTML và môt số CSS đơn giản. Cách thực hiện
Sau đó ta CSS tạo hiêu ứng sau khi hover và ta sẽ được kết quả như ảnh: Custom TooltipsNgoà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 đó Ví dụ với tooltips ở bên trái:
Với các vị trí khác nhau ta làm tương tự như ví dụ trên, các bạn có thể tham khảo demo bên dưới: Như vậy, sau bài viết này, các bạn có thể tạo ra tooltips mà không cần sử dụng thư viện hay plugin bên ngoài mà chỉ cần HTML và CSS cơ bản Chúc các bạn thành công! All rights reserved |
