jQuery – Hiệu ứng Tooltip di chuyển theo chuột

jQuery TooltipKhi tìm hiểu về CSS tôi tình cờ đọc được một cách làm tooltip rất đơn giản chỉ bằng CSS. Thành phần làm tooltip là một thẻ <span> được đặt trong các thẻ cần hiển thị tooltip. Mặc định, tooltip sẽ được ẩn đi và chỉ hiển thị khi người dùng di chuyển chuột vào thẻ chứa tooltip (hover). Tuy nhiên, tôi muốn làm cho tooltip này giống trong các ứng dụng trên desktop.

Easy CSS Tooltip

Đây là tiêu đề của ví dụ mà tôi tham khảo để làm một CSS Tooltip. Đây là mã trang html hoàn chỉnh của ví dụ này:

<html>
<head>
	<style type="text/css">
	a:hover {
		background:#ffffff;
		text-decoration:none;
	}
	/*BG color is a must for IE6*/
	a.tooltip span {
		display:none;
		padding:2px 3px;
		margin-left:8px;
		width:130px;
	}
	a.tooltip:hover span{
		display:inline;
		position:absolute;
		background:#ffffff;
		border:1px solid #cccccc;
		color:#6c6c6c;
	}
	</style>
</head>
<body>
	Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
</body>
</html>

Như bạn thấy ví dụ này rất hay và thực hiện đơn giản, tuy nhiên không nhiều hiệu ứng và tooltip luôn ở một vị trí cố định. Vậy thì đây là lúc để thêm một vài thay đổi nhỏ để tooltip linh hoạt hơn một chút.

Easy CSS Tooltip

jQuery + CSS Tooltip

Dựa theo phương pháp trên, tôi tạo một đoạn CSS dùng định dạng cho các thẻ html cần sử dụng tooltip. Tôi sẽ định dạng dựa theo class để có thể thêm tooltip cho bất kì thẻ nào. Bạn có thể bỏ đi phần tooltipHost, nó chỉ có tác dụng vẽ khung cho các thẻ chứa tooltip trong ví dụ này.

CSS:

.tooltipHost {
    width:300px;
	height:200px;
    border:1px solid black;
	margin-top:5px;
	text-align:center;
}

.tooltip {
    display:none;
    padding:2px 3px;
    background:#FDFDC7;
    margin-left:8px;
    width:130px;
    border:1px solid #cccccc;
}

.tooltipHost:hover .tooltip{
    position:absolute;
    display: inline;
}

Trong ví dụ này tôi sẽ sử dụng một số hàm javascript và jQuery mà bạn có thể chưa rõ sau (các hàm bắt đầu bằng dấu chấm ‘.’ là của jQuery):

–          .css(): gán giá trị cho một thuộc tính css.

–          .animate(): thực hiện một animation dựa trên các property css của một thành phần html.

–          .stop(): hủy bỏ mọi quá trình animation mà hàm animate() gây ra.

–          setTimeout(code, milisec): gọi hàm code sau một khoảng thời gian milisec. Hàm này trả về một giá trị số đại diện cho timer.

–          clearTimeout(timerId): hủy bỏ tác dụng của hàm setTimeout() với timerId là giá trị trả về của hàm setTimeout().

Phương pháp mà tôi thực hiện rất đơn giản, bằng cách xử lý các sự kiện sau của thẻ chứa tooltip:

–          mouseenter(): hiển thị tooltip và hẹn giờ để ẩn tooltip.

–          mousemove() để di chuyển tooltip theo vị trí chuột. Tôi sử dụng hàm animate() để làm hiệu ứng tooltip di chuyển chậm theo chuột. Nếu không muốn, bạn hãy thay nó bằng hàm css() để gán giá trị cho các thuộc tính lefttop.

–          mouseleave(): ẩn tooltip và ngừng các hiệu ứng.

Như vậy tôi có đoạn mã jQuery sau:

$(function(){
	var $tooltip;
	var $host=$(".tooltipHost");
	var timer;
	$host.mouseenter(function(event)
	{
		$tooltip=$(this).children(".tooltip");
		$tooltip.css("left",event.pageX);
		$tooltip.css("top", event.pageY);
		$tooltip.fadeTo(0,1);
		$tooltip.show();
		timer = setTimeout(function() {
			$tooltip.fadeOut()
			}, 1500);
	});
	$host.mousemove(function(event) {
		// $tooltip.css("left",event.pageX)
		// .css("top", event.pageY);
		 $tooltip.stop().animate({left: event.pageX, top: event.pageY}, 20)
	});

	$host.mouseleave(function() {
		clearTimeout(timer);
		$tooltip.stop();
		$tooltip.hide();
	});
});

Mã trang html hoàn chỉnh:

<html>
<head>
<title>Simple jQuery Tooltip</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
	var $tooltip;
	var $host=$(".tooltipHost");
	var timer;
	$host.mouseenter(function(event)
	{
		$tooltip=$(this).children(".tooltip");
		$tooltip.css("left",event.pageX)
			.css("top", event.pageY);
		$tooltip.fadeTo(0,1);
		$tooltip.show();
		timer = setTimeout(function() {
			$tooltip.fadeOut()
			}, 1500);
	});
	$host.mousemove(function(event) {
		// $tooltip.css("left",event.pageX)
		// .css("top", event.pageY);
		 $tooltip.stop().animate({left: event.pageX, top: event.pageY}, 20)
	});

	$host.mouseleave(function() {
		clearTimeout(timer);
		$tooltip.stop();
		$tooltip.hide();
	});
});
</script>
<style type="text/css">
.tooltipHost {
    width:300px;
	height:200px;
    border:1px solid black;
	margin-top:5px;
	text-align:center;
}

.tooltip {
    display:none;
    background:#FDFDC7;
	margin-left:8px;
    width:130px;
    border:1px solid #cccccc;
}

.tooltipHost:hover .tooltip{
	position:absolute;
    display: inline;
}
</style>

</head>

<body>
<div id="div1" class="tooltipHost">
<b>I Heard an Angel</b>
<p>
I heard an Angel singing<br/>
When the day was springing,<br/>
'Mercy, Pity, Peace<br/>
Is the world's release.'<br/>
</p>
<span class="tooltip">by William Blake</span>

</div>
<div class="tooltipHost">
<img src="http://i476.photobucket.com/albums/rr125/yinyang_it/Share/Babies/Baby2.jpg" height="200px" width="200px"/>
<span class="tooltip">Keep silent!</span>

</div>

</body></html>

jQuery Tooltip

https://yinyangit.wordpress.com

2 thoughts on “jQuery – Hiệu ứng Tooltip di chuyển theo chuột

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s