Chú giải công cụ css

CSS Tooltip là cách đơn giản để trình bày một nội dung mà người dùng quan tâm nhưng lại không gây chiếm dụng không gian web. chỉ khi người dùng di chuột tải lên văn bản hoặc hình ảnh nào thì thông tin mới hiện ra. Cách này có thể làm tăng trải nghiệm của người dùng trên trang web của bạn rất tốt. Trong bài viết này mình sẽ hướng dẫn mọi người làm CSS Tooltip đơn giản mà không cần sử dụng đến JQuery - chúng ta chỉ cần CSS để làm điều đó. Ngoài ra, bạn có thể quyết định Tooltip sẽ hiển thị ở vị trí nào khi rê chuột lên bằng cách xác định vị trí hiển thị một cách dễ dàng.

HTML
Trước hết chúng ta cần đưa ra một đoạn mã HTML như sau.
HTML.
Hover over me
    CSS Tooltip text
CSS
Để hiển thị chú giải công cụ mà chúng tôi sử dụng đoạn mã sau.

HTML.
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 6px 0;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}
To display tooltip ở các vị trí tùy chỉnh, chúng ta thực hiện thêm một số thuộc tính nữa. Bạn hãy so sánh.

Chú giải công cụ CSS hàng đầu.

Mã.
.tooltip.top .tiptext{
    margin-left: -60px;
    bottom: 150%;
    left: 50%;
}
.tooltip.top .tiptext::after{
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}
CSS chú giải công cụ dưới cùng.

HTML.
.tooltip.bottom .tiptext{
    margin-left: -60px;
    top: 150%;
    left: 50%;
}
.tooltip.bottom .tiptext::after{
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}
CSS chú giải công cụ bên trái.
HTML.
.tooltip.left .tiptext{
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after{
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}
Chú giải công cụ đúng CSS.
HTML.
.tooltip.right .tiptext{
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after{
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}
Đơn giản chỉ cần vậy thôi là chúng ta có tooltip rồi.
Xin chào một mẹo đơn giản này giúp hữu ích cho nhiều bạn

Tất cả các bài viết. CSS3

Tạo Tooltip bằng CSS3 Hướng dẫn tạo Tooltip bằng CSS3

Định nghĩa CSS CSS

body {
font-family:Arial; 
font-size:14px
}
h1 {
margin-bottom:10px;
}

.tooltip {	
display: inline;	
position: relative;
}
.tooltip:hover:after {	
background-color: #000000; 	
background-color: rgba(0, 0, 0, 0.85);	
-webkit-border-radius: 8px;	
-moz-border-radius: 8px;	
border-radius: 8px;	
bottom: 26px;	
color: #FFFFFF;	
content: attr(data-tooltip-text);	
left: 20%;	
padding: 5px 10px;	
position: absolute;	
width: 130px;	
z-index: 1000;
}
.tooltip:hover:before {	
border: solid;	
border-color: rgba(0, 0, 0, 0.85) transparent;	
border-width: 8px 8px 0 8px;	
bottom: 18px;	
content: "";	
left: 50%;	
position: absolute;	
z-index: 1001;
}

Định nghĩa HTML HTML

Giới thiệu các môn học thiết kế web Online

Chuyên Viên Website Lành Nghề Online

Lập trình HTML5 / CSS3 / RWD / JS Online

Thiết kế giao diện website Online

Lập Trình PHP Cơ Bản Online

Xem demo Tải Code Chat với hocwebgiare. com

Tạo Tooltip
CSS3
Chú giải công cụ
JQUERY
Javascript
RWD

CSS3 Xem (2829) Học thiết kế web

programming css

Chú giải công cụ css

Tất cả các bài viết. CSS3

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội