Tạo hiệu ứng tooltips bằng CSS3

Các tooltip thường là các đoạn văn bản nhỏ và hiện lên mỗi khi người dùng di chuyển chuột lên trên đối tượng đó. Mục đích của tooltip thường là dùng để hiện những đoạn mô tả ngắn về đối tượng. Trước đây khi chúng ta tạo tooltips thường dùng các đoạn javacript , tuy nhiên từ khi CSS3 ra đời thì bạn cũng có thể làm bằng css mà hiệu ứng không kém cạnh gì so với javacript. Đây là demo bài viết mà mình muốn giới thiệu cho các bạn.
Bây giờ chúng ta từng bước  cùng nhau làm tooltips bằng CSS3 nhé.

Bước 1 : HTML

Trong đoạn html sau, chúng ta sẽ tiến hành làm 4 demo tooltips khác nhau

<div>

This is <span>tooltip#1<i>Tooltip number one</i></span>. Which can be in <span>red<i>Tooltip#1 - red color</i></span>, <span>green<i>Tooltip#1 - green color</i></span> and <span>blue<i>Tooltip#1 - blue color</i></span>.
<hr />
This is <span>tooltip#2<i>Tooltip number two</i></span>. Which can be in <span>red<i>Tooltip#2 - red color</i></span>, <span>green<i>Tooltip#2 - green color</i></span> and <span>blue<i>Tooltip#2 - blue color</i></span>.
<hr />
This is <span>tooltip#3<i>Tooltip number three</i></span>. Which can be in <span>red<i>Tooltip#3 - red color</i></span>, <span>green<i>Tooltip#3 - green color</i></span> and <span>blue<i>Tooltip#3 - blue color</i></span>.
<hr />
This is <span>tooltip#4<i>Tooltip number four</i></span>. Which can be in <span>red<i>Tooltip#4 - red color</i></span>, <span>green<i>Tooltip#4 - green color</i></span> and <span>blue<i>Tooltip#4 - blue color</i></span>.
<hr />
<span>
<img src="http://www.thuthuatweb.net/demo/css/images/1.jpg" />
<i><img src="http://www.thuthuatweb.net/demo/css/images/1.jpg" /></i>
</span>

<span>
<img src="http://www.thuthuatweb.net/demo/css/images/2.jpg" />
<i><img src="http://www.thuthuatweb.net/demo/css/images/2.jpg" /></i>
</span>

<span>
<img src="http://www.thuthuatweb.net/demo/css/images/3.jpg" />
<i><img src="http://www.thuthuatweb.net/demo/css/images/3.jpg" /></i>
</span>

</div>

Bước 2 : CSS

Sau đây là toàn bộ đoạn css giúp bạn làm hiệu ứng tooltips cho từng demo

.content {
background-color:rgba(255,255,255, 0.9);
margin:50px auto;
awidth:800px;
}
.content span {
background:#eee;
border:1px solid #444;
cursor:pointer;
display:inline-block;
outline:none;
padding:0 5px;
position:relative;
text-decoration:none;

-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
.content span i {
visibility:hidden;
border:1px solid #444;
bottom:60px;
left:50%;
margin-left:-110px;
opacity:0;
padding:10px;
position:absolute;
awidth:200px;
z-index:99;

background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-color: #eee;

-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.content span:hover i {
bottom:30px;
opacity:0.95;
visibility:visible;
}
.content span:hover i.v2 {
bottom:30px;

-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
.content span:hover i.v3 {
-webkit-transform:rotateX(360deg) scale(1.2);
-moz-transform:rotateX(360deg) scale(1.2);
-ms-transform:rotateX(360deg) scale(1.2);
-o-transform:rotateX(360deg) scale(1.2);
transform:rotateX(360deg) scale(1.2);
}
.content span i.v4 {
height:70px;
margin-left:-60px;
padding-top:40px;
text-align:center;
awidth:100px;

-webkit-border-radius: 50% 50% 50% 50%;
-moz-border-radius: 50% 50% 50% 50%;
-ms-border-radius: 50% 50% 50% 50%;
-o-border-radius: 50% 50% 50% 50%;
border-radius: 50% 50% 50% 50%;
}
.content span i:before,.content span i:after {
border-bottom:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #444;
bottom:-8px;
content:"";
left:50%;
margin-left:-8px;
position:absolute;
z-index:100;
}

/* custom colors */
.content span.r {
background:#f88;
}
.content span.r i {
background-color:#f44;
border:1px solid #f44;
}
.content span.r i:before, .content span.r i:after {
border-top-color:#f44;
}

.content span.g {
background:#8f8;
}
.content span.g i {
background-color:#4f4;
border:1px solid #4f4;
}
.content span.g i:before, .content span.g i:after {
border-top-color:#4f4;
}

.content span.b {
background:#88f;
}
.content span.b i {
background-color:#44f;
border:1px solid #44f;
}
.content span.b i:before, .content span.b i:after {
border-top-color:#44f;
}

/* images */
.content span img {
height:128px;
awidth:128px;
}
.content span.img i {
height:auto;
margin-left:-65px;
margin-top:-10px;
awidth:auto;
}
.content span.img i:before, .content span.img i:after {
display:none;
}
.content span:hover i img {
height:auto;
awidth:auto;
}

Các bạn thấy sao, làm tooltips bằng CSS3 cũng dễ dàng quá phải không nè. Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster