Tooltip สวยๆ ด้วย Better Tooltip jQuery plugin

admin   พฤษภาคม 3, 2012  

แนะนำ tooltip สวยๆ อีกตัวหนึ่งครับ เป็น jquery plugin ใช้งานง่ายไม่ยุ่งยาก โดยกำหนดข้อความที่ต้องการแสดงเป็น tooltip ใว้ที่ attribute title ของ element ที่เราต้องการให้แสดง tooltip แล้วเขียน code javascript และ css กำหนดอีกเล็กน้อย

Live Demo

วิธีการติดตั้ง

1. ดาวโหลดสิ่งที่จำเป็น

Download

2. เขียนโค้ด include ไฟล์ css, jquery และตัว betterTooltip ครับ

1
2
3
<link type="text/css" href="cs/style.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.piranon.com/demo/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.piranon.com/demo/js/jquery.betterTooltip.js"></script>

3 เขียน code html

1
2
<label>ตัวอย่าง : </label>
<input type="text" name="example" id="example" class="tTip" title="สร้าง Tooltip สวยๆ ด้วย Better Tooltip jQuery plugin" />

4. เขียน code javascript เพื่อติดต่อกับ class tTip บน tag input

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function(){
	$('.tTip').betterTooltip({speed: 150, delay: 300});
});
</script>

โค้ดทั้งหมด

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Demo Tooltip สวยๆ ด้วย Better Tooltip jQuery plugin | Piranon.com</title>
	<meta charset="utf-8" />
	<meta name="description" content="demo วิธีสร้าง Tooltip โดยใช้ Better Tooltip jQuery plugin" />
	<meta name="keywords" content="tooltip, jquery, jquery plugin, tooltip plugin, tooltip jquery plugin" />
	<link rel="shortcut icon" href="https://www.piranon.com/wp-content/themes/black-with-orange/images/icon.ico" />
 
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<link type="text/css" href="cs/style.css" rel="stylesheet" />
	<script type="text/javascript" src="https://www.piranon.com/demo/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="https://www.piranon.com/demo/js/jquery.betterTooltip.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('.tTip').betterTooltip({speed: 150, delay: 300});
	});
	</script>
</head>
 
<body>
	<div id="content">
		<h1>Demo Tooltip สวยๆ ด้วย Better Tooltip jQuery plugin</h1>
		<p>
			<label>ตัวอย่าง : </label>
			<input type="text" name="example" id="example" class="tTip" title="สร้าง Tooltip สวยๆ ด้วย Better Tooltip jQuery plugin">
		</p>
		<br />
		<a href="https://www.piranon.com/tooltip-%E0%B8%AA%E0%B8%A7%E0%B8%A2%E0%B9%86-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-better-tooltip-jquery-plugin/" class="tTip" title="กลับไปหน้าบทความ Click อิอิ" />Back</a>
 
	</div>
</body>
</html>

Comments

comments

Powered by Facebook Comments