Tất cả bài viết | CSS3

Tạo Tooltip bằng CSS3

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

Phần định nghĩa 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;
}

Phần định nghĩa 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