JqueryUI - เคล็ดลับเครื่องมือ

วิดเจ็ตคำแนะนำเครื่องมือของ jQueryUI แทนที่คำแนะนำเครื่องมือดั้งเดิม วิดเจ็ตนี้เพิ่มธีมใหม่และอนุญาตให้ปรับแต่งได้ ก่อนอื่นให้เราเข้าใจว่าคำแนะนำเครื่องมือคืออะไร? คำแนะนำเครื่องมือสามารถแนบกับองค์ประกอบใดก็ได้ ในการแสดงคำแนะนำเครื่องมือเพียงแค่เพิ่มแอตทริบิวต์titleให้กับองค์ประกอบที่ป้อนเข้าและค่าแอตทริบิวต์หัวเรื่องจะถูกใช้เป็นคำแนะนำเครื่องมือ เมื่อคุณวางเมาส์เหนือองค์ประกอบของคุณแอตทริบิวต์หัวเรื่องจะปรากฏในกล่องเล็ก ๆ ถัดจากองค์ประกอบ

jQueryUI ให้ tooltip()วิธีเพิ่มคำแนะนำเครื่องมือให้กับองค์ประกอบใด ๆ ที่คุณต้องการแสดงคำแนะนำเครื่องมือ ซึ่งจะทำให้ภาพเคลื่อนไหวจางลงโดยค่าเริ่มต้นเพื่อแสดงและซ่อนคำแนะนำเครื่องมือเปรียบเทียบกับการสลับการเปิดเผยเท่านั้น

ไวยากรณ์

tooltip() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .tooltip (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .tooltip ("action", [params])วิธีการ

$ (ตัวเลือกบริบท) .tooltip (ตัวเลือก) วิธีการ

เคล็ดลับ (ตัวเลือก)วิธีการบอกว่าคำแนะนำเครื่องมือสามารถเพิ่มไปยังองค์ประกอบ HTML ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมและลักษณะของคำแนะนำเครื่องมือที่

ไวยากรณ์

$(selector, context).tooltip(options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).tooltip({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$(".selector").tooltip(
   { content: "Some content!" }
);
$(".selector").tooltip(
   { disabled: true }
);
$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").tooltip(
   { items: "img[alt]" }
);
$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
$(".selector").tooltip(
   { track: true }
);

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	เนื้อหา ตัวเลือกนี้แสดงถึงเนื้อหาของคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือfunction returning the title attribute. Option - content ตัวเลือกนี้แสดงถึงเนื้อหาของคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือfunction returning the title attribute. สิ่งนี้สามารถเป็นประเภท - Function- การเรียกกลับสามารถส่งคืนเนื้อหาโดยตรงหรือเรียกอาร์กิวเมนต์แรกส่งผ่านเนื้อหาเช่น สำหรับเนื้อหา Ajax String - สตริง HTML ที่จะใช้สำหรับเนื้อหาคำแนะนำเครื่องมือ Syntax `$(".selector").tooltip( { content: "Some content!" } );`
2	ปิดการใช้งาน ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").tooltip( { disabled: true } );`
3	ซ่อน ตัวเลือกนี้แสดงถึงเอฟเฟกต์ภาพเคลื่อนไหวเมื่อซ่อนคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือtrue. Option - hide ตัวเลือกนี้แสดงถึงเอฟเฟกต์ภาพเคลื่อนไหวเมื่อซ่อนคำแนะนำเครื่องมือ โดยค่าเริ่มต้นคือtrue. สิ่งนี้สามารถเป็นประเภท - Boolean- นี้จะเป็นจริงหรือเท็จ เมื่อตั้งค่าเป็นจริงคำแนะนำเครื่องมือจะหายไปพร้อมกับระยะเวลาเริ่มต้นและการค่อยๆเปลี่ยนเริ่มต้น Number - คำแนะนำเครื่องมือจะหายไปตามระยะเวลาที่ระบุและการค่อยๆเปลี่ยนเริ่มต้น String- เดอะเคล็ดลับจะถูกซ่อนไว้โดยใช้ผลที่ระบุเช่น"slideUp", "พับ" Object- ค่าที่เป็นไปได้ ได้แก่ เอฟเฟกต์ความล่าช้าระยะเวลาและการค่อยๆเปลี่ยน Syntax `$(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );`
4	รายการ ตัวเลือกนี้ระบุรายการที่สามารถแสดงคำแนะนำเครื่องมือได้ โดยค่าเริ่มต้นคือ[title]. Option - items ตัวเลือกนี้ระบุรายการที่สามารถแสดงคำแนะนำเครื่องมือได้ โดยค่าเริ่มต้นคือ[title]. Syntax `$(".selector").tooltip( { items: "img[alt]" } );`
5	ตำแหน่ง ตัวเลือกนี้จะกำหนดตำแหน่งของคำแนะนำเครื่องมือเขียนองค์ประกอบเป้าหมายที่เกี่ยวข้อง โดยค่าเริ่มต้นคือfunction returning the title attribute. ค่าที่เป็นไปได้คือmy, at, of, collision, using, within Option - position ตัวเลือกนี้จะกำหนดตำแหน่งของคำแนะนำเครื่องมือเขียนองค์ประกอบเป้าหมายที่เกี่ยวข้อง โดยค่าเริ่มต้นคือfunction returning the title attribute. ค่าที่เป็นไปได้คือmy, at, of, collision, using, within Syntax `$(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );`
6	แสดง ตัวเลือกนี้แสดงถึงวิธีทำให้การแสดงคำแนะนำเครื่องมือเป็นภาพเคลื่อนไหว โดยค่าเริ่มต้นคือtrue. Option - show ตัวเลือกนี้แสดงถึงวิธีทำให้การแสดงคำแนะนำเครื่องมือเป็นภาพเคลื่อนไหว โดยค่าเริ่มต้นคือtrue. สิ่งนี้สามารถเป็นประเภท - Boolean- นี้จะเป็นจริงหรือเท็จ เมื่อตั้งค่าเป็นจริงคำแนะนำเครื่องมือจะหายไปพร้อมกับระยะเวลาเริ่มต้นและการค่อยๆเปลี่ยนเริ่มต้น Number - คำแนะนำเครื่องมือจะหายไปตามระยะเวลาที่ระบุและการค่อยๆเปลี่ยนเริ่มต้น String- เดอะเคล็ดลับจะถูกซ่อนไว้โดยใช้ผลที่ระบุเช่น"slideUp", "พับ" Object- ค่าที่เป็นไปได้ ได้แก่ เอฟเฟกต์ความล่าช้าระยะเวลาและการค่อยๆเปลี่ยน Syntax `$(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );`
7	tooltipClass อ็อพชันนี้เป็นคลาสที่สามารถเพิ่มลงในวิดเจ็ตคำแนะนำเครื่องมือสำหรับคำแนะนำเครื่องมือเช่นคำเตือนหรือข้อผิดพลาด โดยค่าเริ่มต้นคือnull. Option - tooltipClass อ็อพชันนี้เป็นคลาสที่สามารถเพิ่มลงในวิดเจ็ตคำแนะนำเครื่องมือสำหรับคำแนะนำเครื่องมือเช่นคำเตือนหรือข้อผิดพลาด โดยค่าเริ่มต้นคือnull. Syntax `$(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );`
8	ติดตาม ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงคำแนะนำเครื่องมือจะติดตาม / ติดตามเมาส์ โดยค่าเริ่มต้นคือfalse. Option - track ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงคำแนะนำเครื่องมือจะติดตาม / ติดตามเมาส์ โดยค่าเริ่มต้นคือfalse. Syntax `$(".selector").tooltip( { track: true } );`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานบางส่วนของฟังก์ชันคำแนะนำเครื่องมือ

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นตัวอย่างง่ายๆของฟังก์ชันคำแนะนำเครื่องมือที่ไม่ส่งพารามิเตอร์ไปยังไฟล์ tooltip() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML tooltipexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ในตัวอย่างข้างต้นวางเมาส์เหนือลิงก์ด้านบนหรือใช้ปุ่มแท็บเพื่อวนโฟกัสไปที่แต่ละองค์ประกอบ

การใช้เนื้อหาติดตามและปิดใช้งาน

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือกที่สำคัญสามตัวเลือก (a) content (b) track และ (c) disabled ในฟังก์ชันคำแนะนำเครื่องมือของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

ในตัวอย่างข้างต้นเนื้อหาของคำแนะนำเครื่องมือของช่องแรกถูกตั้งค่าโดยใช้ตัวเลือกเนื้อหา คุณยังสามารถสังเกตเห็นคำแนะนำเครื่องมือตามเมาส์ คำแนะนำเครื่องมือสำหรับช่องป้อนข้อมูลที่สองถูกปิดใช้งาน

การใช้ตำแหน่ง

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือก position ในฟังก์ชันคำแนะนำเครื่องมือของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

ในตัวอย่างข้างต้นตำแหน่งคำแนะนำเครื่องมือจะถูกกำหนดไว้ที่ด้านบนของช่องป้อนข้อมูล

$ (ตัวเลือกบริบท) .tooltip ("action", [params]) วิธีการ

วิธีการคำแนะนำเครื่องมือ (การดำเนินการพารามิเตอร์)สามารถดำเนินการกับองค์ประกอบคำแนะนำเครื่องมือเช่นการปิดใช้งานคำแนะนำเครื่องมือ action ถูกระบุเป็นสตริงในอาร์กิวเมนต์แรกและทางเลือกหนึ่งหรือมากกว่า params สามารถให้ตามการกระทำที่กำหนด

โดยพื้นฐานแล้วการกระทำที่นี่ไม่มีอะไรเลยนอกจากเป็นวิธี jQuery ซึ่งเราสามารถใช้ในรูปแบบของสตริง

ไวยากรณ์

$(selector, context).tooltip ("action", [params]);

ตารางต่อไปนี้แสดงการดำเนินการสำหรับวิธีนี้ -


$(".selector").tooltip("close");
$(".selector").tooltip("destroy");
$(".selector").tooltip("disable");
$(".selector").tooltip("enable");
$(".selector").tooltip("open");
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
$(".selector").tooltip("option");
$( ".selector" ).tooltip( "option", "disabled", true );
$( ".selector" ).tooltip( "option", { disabled: true } );
$(".selector").tooltip("widget");

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ปิด() การดำเนินการนี้จะปิดคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - close() การดำเนินการนี้จะปิดคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("close");`
2	ทำลาย() การดำเนินการนี้จะลบฟังก์ชันคำแนะนำเครื่องมือทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy() การดำเนินการนี้จะลบฟังก์ชันคำแนะนำเครื่องมือทั้งหมด สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("destroy");`
3	ปิดการใช้งาน () การดำเนินการนี้จะปิดใช้งานคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable() การดำเนินการนี้จะปิดใช้งานคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("disable");`
4	เปิดใช้งาน () การดำเนินการนี้จะเปิดใช้งานคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable() การดำเนินการนี้จะเปิดใช้งานคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("enable");`
5	เปิด() การดำเนินการนี้จะเปิดคำแนะนำเครื่องมือโดยใช้โปรแกรม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - open() การดำเนินการนี้จะเปิดคำแนะนำเครื่องมือโดยใช้โปรแกรม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("open");`
6	ตัวเลือก (optionName) การดำเนินการนี้ได้รับค่าที่เกี่ยวข้องกับoptionNameสำหรับคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - option( optionName ) การดำเนินการนี้ได้รับค่าที่เกี่ยวข้องกับoptionNameสำหรับคำแนะนำเครื่องมือ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );`
7	ตัวเลือก () การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกคำแนะนำเครื่องมือปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - option() การดำเนินการนี้ได้รับออบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกคำแนะนำเครื่องมือปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("option");`
8	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าตัวเลือกคำแนะนำเครื่องมือที่เกี่ยวข้องกับการระบุOptionName Action - option( optionName, value ) การกระทำนี้จะตั้งค่าตัวเลือกคำแนะนำเครื่องมือที่เกี่ยวข้องกับการระบุOptionName Syntax `$( ".selector" ).tooltip( "option", "disabled", true );`
9	option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับคำแนะนำเครื่องมือ Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับคำแนะนำเครื่องมือ Syntax `$( ".selector" ).tooltip( "option", { disabled: true } );`
10	วิดเจ็ต () การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบดั้งเดิม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - widget() การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบดั้งเดิม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").tooltip("widget");`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของการดำเนินการปิดการใช้งานและเปิดใช้งาน

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML tooltipexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -

ในตัวอย่างข้างต้นคลิกที่ปุ่มmyBtnและคำแนะนำเครื่องมือจะปรากฏขึ้น

การจัดการเหตุการณ์ในองค์ประกอบคำแนะนำเครื่องมือ

นอกเหนือจากวิธีคำแนะนำเครื่องมือ (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการเหตุการณ์ซึ่งจะถูกเรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	สร้าง (เหตุการณ์, UI) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - create(event, ui) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$(".selector").tooltip( create: function(event, ui) {} );`
2	ปิด (เหตุการณ์ ui) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกปิด มักจะเป็นต้นเหตุในfocusoutหรือMouseLeave ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - close(event, ui) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกปิด มักจะเป็นต้นเหตุในfocusoutหรือMouseLeave ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - tooltip - องค์ประกอบคำแนะนำเครื่องมือที่สร้างขึ้น Syntax `$(".selector").tooltip( close: function(event, ui) {} );`
3	เปิด (เหตุการณ์, ui) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกแสดงหรือแสดงขึ้น มักจะเรียกในfocusinหรือวางเมาส์ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - open(event, ui) ทริกเกอร์เมื่อคำแนะนำเครื่องมือถูกแสดงหรือแสดงขึ้น มักจะเรียกในfocusinหรือวางเมาส์ โดยที่เหตุการณ์เป็นประเภทเหตุการณ์และuiเป็นประเภทวัตถุค่าที่เป็นไปได้ของuiคือ - tooltip - องค์ประกอบคำแนะนำเครื่องมือที่สร้างขึ้น Syntax `$(".selector").tooltip( open: function(event, ui) {} );`

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานวิธีเหตุการณ์ระหว่างฟังก์ชันคำแนะนำเครื่องมือ ตัวอย่างนี้แสดงให้เห็นถึงการใช้เหตุการณ์แบบเปิดและปิด

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

ในตัวอย่างข้างต้นคำแนะนำเครื่องมือสำหรับHover over me! หายไปทันทีในขณะที่คำแนะนำสำหรับวางเมาส์เหนือฉันด้วย! จางหายไปหลังจากระยะเวลา 1,000 มิลลิวินาที