Hiệu ứng tooltips chỉ dùng CSS

Chúng ta đều biết hiệu ứng tooltips được dùng phổ biến trong thiết kế web, nó giúp hiển thị thêm thông tin về một liên kết khi rê trỏ qua liên kết đó. Để tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Bài viết này giới thiệu một cách tạo hiệu ứng tooltips như vậy.

Bạn hãy rê trỏ vào các liên kết trong đoạn text dưới đây để xem demo. Trong demo có 3 định dạng khác nhau theo thứ tự Style 1, Style 2, Style 3.

This is a practical, elegant CSS tooltipĐể tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltipCó thể tùy biến tooltip một cách dễ dàng pops up, which works in all modern browsers. Unlike a regular tooltip (ie: one created using the "title" attribute), Cool CSS TooltipTooltip chỉ dùng CSS rất đơn giản và gọn nhẹ continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.

Để thực hiện, bạn hãy làm theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>.

/* Tooltip with CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Màu text cho liên kết */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Màu text cho mô tả */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/TmNok) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/DqRTW) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/e8oAy) no-repeat bottom;
}

Trên đây là CSS cho Style 1. Nếu bạn muốn Style 2 thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/hIWel) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/wg17s) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/3RTsz) no-repeat bottom;
}

Nếu bạn muốn Style 3 thì thay bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/i7YJE) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/NZ5f1) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/jiFUt) no-repeat bottom;
}

Lưu Template.

Bước 2. Thiết lập cấu trúc HTML cho liên kết như sau.

<a href="URL_Liên kết" class="tt">Text liên kết<span class="tooltip"><span class="top"></span><span class="middle">Đoạn text thông tin mô tả cho liên kết</span><span class="bottom"></span></span></a>

Hy vọng thủ thuật nhỏ này giúp ích nhiều cho blogspot của bạn. :47)

More about →

Hiệu ứng fading tooltip với phần mô tả bằng hình ảnh

Fading Tooltip là một script tạo hiệu ứng mô tả liên kết rất dễ sử dụng và rất nhẹ, chỉ với dung lượng 2kb. Nó đã được test trên các công cụ trình duyệt như IE6+, Firefox, Opera và Safari. Jacob Gube tại trang Six Revisions đã có bài viết về script này. Sau khi nghiên cứu, tôi xin trình bày cách thực hiện hiệu ứng tooltip như vậy để quý bạn đọc chia sẻ kinh nghiệm thiết kế web. :3)

Để cài đặt, trước tiên bạn hãy xem phần Demo, sau đó lần lượt đọc qua các bước theo thứ tự Script >> CSS >> HTML.

Đây là phần giới thiệu demo. Bạn hãy rê con trỏ vào các liên kết để thấy hiệu ứng. Demo 1 là kiểu tooltip có background và Demo 2 là kiểu tooltip không có background.

Ut tincidunt nisi quis elit dignissim mattis. Phasellus sit amet nunc eu est scelerisque tincidunt sit amet vitae sem. Sed ut nisi lorem. Vivamus ut felis libero. Vivamus venenatis justo ante. Nunc elementum interdum dolor, sit amet condimentum diam fermentum ac. Sed dictum condimentum arcu, id ornare turpis accumsan eu. Praesent ultricies egestas nulla at consectetur. Nunc sed est nulla, sit amet aliquam purus. Nam semper lacinia egestas. Nunc dictum lobortis arcu at bibendum?

Donec commodo nulla et magna malesuada a euismod metus aliquam. In hac habitasse platea dictumst. Vivamus mattis, nisi ac commodo cursus, metus justo eleifend sem, non auctor nisi felis eu tellus. Duis convallis condimentum elit, quis ullamcorper odio commodo ac. Aliquam ornare commodo fermentum. Aenean ut diam sed.

demo 1 | demo 2 | reset

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type="text/javascript">
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<style>
.hotspot {
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: Arial, Tahoma;
font-size: 13px;
}

#tt {
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}
</style>

Ở kiểu Demo 1, sử dụng background: CornflowerBlue;. Ở kiểu Demo 2, sử dụng background: transparent;.

Bước 3. Thiết lập cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn');" onmouseout="tooltip.hide();"> text liên kết </span>

Nếu trong phần mô tả, bạn muốn sử dụng các thẻ HTML thì phải mã hóa dấu < thành &lt; và dấu > thành &gt;.

Nếu sử dụng hình ảnh làm phần mô tả liên kết thì sử dụng cấu trúc như sau.

<span class="hotspot" onmouseover="tooltip.show('&lt;img src=\'URL_hình ảnh\'/&gt;');" onmouseout="tooltip.hide();"> text liên kết </span>

Cập nhật: Theo yêu cầu của bạn hoang-deejay, bạn ấy muốn sử dụng hiệu ứng này cho hình ảnh. Vậy đối với hình ảnh thì sử dụng cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn cho hình ảnh');" onmouseout="tooltip.hide();"> <img src="URL_hình ảnh" /> </span>

Ví dụ:

Bạn có thể tạo hiệu ứng này cho blogspot tương tự như các bước sử dụng cho website.

Chúc bạn thành công! :7)

More about →

Tạo hiệu ứng Tooltip trong trường dữ liệu của Form

Tooltip là một thành phần giao thức người dùng khá phổ biến. Nó được sử dụng để tạo hiệu ứng con trỏ. Người dùng web rê con trỏ qua một đối tượng mà không kích trỏ vào nó, thì hiệu ứng tooltip xuất hiện với một khung nhỏ chứa thông tin về đối tượng đã được rê chuột.

Chúng ta có thể sử dụng tooltip trong những trường dữ liệu (field) của một Form. Bạn có thể di chuyển giữa các trường bằng bàn phím (sử dụng phím TAB) hoặc bằng chuột.

Xem Demo.

Các bước thực hiện như sau:

1. Bước 1: Đặt code CSS vào phần đầu của trang web, giữa 2 thẻ <head>, </head>.

<style type="text/css">

/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;

/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}

#myform h3 {
text-align:center;
margin:0 0 10px 0;
}

/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}

#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}

#inputs br {
clear: left;
}
</style>

2. Bước 2: Đặt đoạn code jQuery bên dưới vào trước thẻ </head>.
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

3. Bước 3: Đặt đoạn code jQuery dưới đây vào trước thẻ </body>.

<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {



// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({

// place tooltip on the right edge
position: "center right",

// a little tweaking of the position
offset: [-2, 10],

// use the built-in fadeIn/fadeOut effect
effect: "fade",

// custom opacity setting
opacity: 0.7

});
});
</script>

4. Bước 4: Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân của trang web (giữa 2 thẻ <body>, </body>).

<form id="myform" action="#">

<h3>Registration Form</h3>

<div id="inputs">

<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/><br />

<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Try to make it hard to guess." /><br />

<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." /><br />

<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea><br />

<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>

<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>

<p>
<button type="button" title="This button won't do anything">Proceed</button>
</p>

</form>

Những dòng chữ màu đỏ là phần nội dung hiển thị mà bạn cần sửa đổi cho hiệu ứng theo nhu cầu của bạn.

More about →

Tạo hiệu ứng mô tả liên kết chỉ bằng file Javascript

Chúng ta đã biết cách thực hiện hiệu ứng mô tả liên kết bằng DHTML Tooltip qua bài viết Hiệu ứng liên kết có mô tả … nhưng phải dùng đến cả CSS và Javascript. Ở bài này tôi xin giới thiệu cách làm đơn giản hơn, chỉ sử dụng 1 file Javascript mà thôi.


Bạn hãy rê chuột vào liên kết này để xem kết quả hiệu ứng.

Sau đây là hướng dẫn thao tác:

Đặt đoạn code bên dưới ngay sau thẻ <body>.

<script type="text/javascript" src="/wz_tooltip.js"></script>

Bạn nên tải file wz_tooltip.js về rồi upload lên webhost của bạn sau đó gắn URL của file vào phần scr ở trên.

Kế đến bạn chỉ cần thiết lập HTML cho liên kết như sau:

<a onmouseover="Tip('Phần mô tả liên kết')" onmouseout="UnTip()" href="URL của liên kết">Tiêu đề của liên kết</a>

Như vậy phương pháp này đã rút ngắn hơn một công đoạn CSS so với phương pháp trước. Bạn có thể áp dụng cách này dễ dàng cho Blogger.

More about →

Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript

Hiệu ứng liên kết dạng mô tả giúp cho người lướt web có thể có nhiều hơn thông tin về một liên kết trước khi kích trỏ để vào trực tiếp liên kết. Ngôn ngữ Javascript có thể được sử dụng kết hợp với CSS để thực hiện hiệu ứng này.


Xem trang demo demo.

Sau đây là hướng dẫn thiết lập hiệu ứng.

Đặt đoạn code sau vào giữa 2 thẻ <head>, </head> của trang web.

<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Xóa dòng phía dưới nếu muốn bỏ thuộc tính bóng mờ cho khung mô tả liên kết. Dòng này luôn xuất hiện sau cùng trong phần CSS này*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);

}
</style>
<script language="javascript" src="/tooltip.js"></script>

Bạn nên tải file tooltip.js về rồi upload lên webhost của mình sau đó đặt liên kết file vào scr.

Ở phần code cho liên kết, bạn thiết lập như thế này:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của liên kết')" onmouseout="hidetip();">Tiêu đề của liên kết</a>

Hiệu ứng này có thể áp dụng cho Blogger, bạn hãy khám phá đi nhé! Rất dễ dàng!

More about →