Xem bài viết Tạo Tooltip đơn giản không cần Javascript

Tạo Tooltip đơn giản không cần Javascript

Jul 13, 2012Html / Css
Tooltip này rất dễ thực hiện, bạn chỉ cần đặt title cho thẻ a và thêm class="tooltip", nó sẽ tự động chuyển sang tooltip cho bạn. Và đây là phần HTML.

1. HTML

Tạo tooltip đơn giản không cần dùng javascript - 2Cwebvn

Trở lại bài viết để xem hướng dẫn chi tiết

Example Tooltip: Hover Me

2. CSS

Phần Css định dạng tooltip cho thẻ a có nội dung như sau:
body {background: url(background_2cwebvn.png); text-align:center; }
div.container{
	margin: 50px auto;
	width: 700px;
}

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(51,51,51,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(51,51,51,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
	background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(51,51,51,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#333333',GradientType=0 );    
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
	border-radius: 3px;
    bottom: 2.35em;
    color: #fff;
    content: attr(title);
	font-size: 12px;
    display: block;
    left: 1em;
    padding: 8px 20px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
	width: 10px;
	height: 10px;
	background: rgba(51,51,51,1);
	-webkit-transform: rotate(45deg);
	box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    bottom: 1.5em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

a.tooltip:link{
	color:#DB2E66;
	text-decoration:none;
}

a.tooltip:visited{
	color:#DB2E66;
	text-decoration:none;
}

a.tooltip:hover{
	color:#999;
	text-decoration:none;
}
p.back{margin-top:20px;}
p.exam{
	
	color:#646464;
	line-height:1.5;
	display: block;
	width: 180px;
	margin:150px auto 0px;
}

Vậy là ta đã có tooltip rồi đấy bạn, thật dễ làm đúng không nào? Bạn có thể thực hiện tooltip để chú thích điều gì đó cho các link khi người dùng hover vào.

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments