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

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

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

ไวยากรณ์

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

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

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

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

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

ไวยากรณ์

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

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

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

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

ซีเนียร์ ตัวเลือกและคำอธิบาย
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>

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

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

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

ตัวอย่างต่อไปนี้แสดงการใช้ตัวเลือก 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>

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

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

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

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

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

ไวยากรณ์

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

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

ซีเนียร์ การดำเนินการและคำอธิบาย
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>

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

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