GORAGOD.com

Fade Effect Tooltip

แสดงทูลทิป ได้ทั้ง IE, Firefox, Opera, Netscap มีหัวลูกศรด้วย สามารถทำลิงค์ที่กำหนด title ไว้ให้สามารถแสดง tooltip ได้โดยอัตโนมัติ เป็นตัวที่ผมใช้จริงบนเว็บ (ดาวน์โหลดจากต้นฉบับเลย) มี Fade Effect ตอนแสดง-ซ่อน tooltip ผมใช้ตัวนี้ในการแสดงข้อมูลในกระทู้ด้วย AJAX ครับ

การนำไปใช้งาน lyrtooltip ต้องกำหนดให้ตรงกันกับตัวแปร lyrtooltip ใน tooltip.js ด้วยนะครับ เป็นตัวกำหนด Style ให้กับพื้นที่แสดงผลของ tooltip และต้องไม่ซ้ำกับตัวอื่นๆ บนเว็บ(ID)

การนำไปใช้งาน ด้วยการให้ลิงค์แสดง toolip โดยอัตโนมัติ
<script src=tooltip.js></script>

<style>
#lyrtooltip {
  border: 1px solid orange;
  background-color: white;
  font-size: 12px;
  padding: 3px 3px;
  text-align: left;
}
</style>


<a href=# title="ทดสอบ 1">ทดสอบ 1</a> <a href=# title="ทดสอบ 2">ทดสอบ 2</a>

การเรียก tooltip ให้แสดง โดยการกำหนดเอง
displaytooltip(this, "ข้อความ");

การซ่อน tooltip โดยการกำหนดเอง
hidetooltip();

ต้องการให้ tooltip ค้นหา Link ต่างๆบนเว็บที่กำหนด title ไว้แสดง tooltp ให้เรียกใช้ฟังก์ชั่น
autotooltip();

ตัวอย่างการแสดง tooltip ให้กับ link แบบกำหนดเอง
<a href=# onmouserover='displaytooltip(this, "ข้อความ")' onmouseout='hidetooltip()' onclick='hidetooltip()'>ทดสอบ 1</a>

 (888)