Car







Chú ý: Skin diễn đàn hoạt động tốt với trình duyệt (Chrome) trình duyệt firefox có thể sảy ra vài lỗi !

Hình con chym đăng kí

Đăng bởi: Admin
Tue Jul 17, 2012 11:38 pm

: 2


You are not connected. Please login or register

[HD]Tạo tooltip đơn giản không cần Javascript

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

avatar
Admin
Admin
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.
[You must be registered and logged in to see this link.]-----------[You must be registered and logged in to see this link.]

1. HTML


Code:
<div class="container"><h2>Tạo tooltip đơn giản không cần dùng javascript - 2Cwebvn</h2>   
    <p class="back"><a href="http://www.2cweb.vn/news/html-css/tao-tooltip-don-gian-khong-can-javascript-10-24.html" class="tooltip" title="Back to 2Cwebvn">Trở lại bài viết để xem hướng dẫn chi tiết</a></p>
    <p class="exam">Example Tooltip: <a href="#" class="tooltip" title="Beautiful tooltip - 2Cwebvn">Hover Me</a></p>
</div>

2. CSS


Code:
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 hướng dẫn 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 thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!



Xem lý lịch thành viên http://vnhome.org.org
Share this post on: diggdeliciousredditstumbleuponslashdotyahoogooglelive

No Comment.

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết