Tooltip jQuery UI การสร้าง Tooltip ง่าย ๆ ด้วย jQuery UI
บทความวันที่ 21 พฤศจิกายน 2555
บทความนี้ขอกล่าวถึงเรื่องการใช้งาน Tooltip ของ jQuery UI ซึ่ง Tooltip นั้นมีประโยชน์อย่างมากสำหรับการขึ้นแจ้งเตือนข้อความบางอย่างให้กับผู้ใช้งานได้ทราบ ซึ่งใน jQuery UI นั้นก็มีคำสั่ง tooltip() ให้ใช้งานกันอย่างง่ายดาย และมีประสิทธิภาพ
ภาพรวมของ Tooltip jQuery UI
1. ใช้คำสั่ง $('[Target_Element]').tooltip() ในการเรียกใช้ Tooltip ที่ต้องการ
2. สามารถประยุกต์ใช้งานร่วมกับ Elements, Objects ต่าง ๆ ภายใน Form
ตัวอย่้างโปรแกรม
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
}
</style>
</head>
<body>
<p><label for="age">What is you name :</label>
<input title="My name is AmplySoft." /></p>
</body>
</html>
ผลลัพธ์
คำค้นหา Tooltip jQuery UI, รับทำเว็บ, เรียนเขียนโปรแกรม, รับเขียนเว็บ
