คำแนะนำเครื่องมือมีประโยชน์มากเมื่อคุณต้องการอธิบายลิงก์ ปลั๊กอิน Tooltip ได้รับแรงบันดาลใจจาก jQuery.tipsy เขียนโดย Jason Frame ปลั๊กอิน Tooltip ได้ทำการปรับปรุงมากมายเช่นไม่ต้องพึ่งพาภาพ แต่ใช้ CSS เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวและใช้คุณลักษณะข้อมูลเพื่อจัดเก็บข้อมูลชื่อเรื่อง
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง Tooltip.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
1. การใช้งาน
ปลั๊กอิน Tooltip สร้างเนื้อหาและแท็กตามข้อกำหนด โดยค่าเริ่มต้นคำแนะนำเครื่องมือจะถูกวางไว้ด้านหลังองค์ประกอบทริกเกอร์ มีสองวิธีที่คุณสามารถเพิ่มคำแนะนำเครื่องมือ:
1. ผ่านแอตทริบิวต์ข้อมูล: หากคุณต้องการเพิ่มคำแนะนำเครื่องมือให้เพิ่ม data-toggle = "Tooltip" ลงในแท็กจุดยึด ชื่อของสมอคือข้อความของคำแนะนำเครื่องมือ โดยค่าเริ่มต้นปลั๊กอินจะตั้งค่าคำแนะนำเครื่องมือที่ด้านบน
<a href = "#" data-toggle = "tooltip"> โปรดโฮเวอร์เหนือฉัน </a>
2. ผ่าน JavaScript: Trigger Tooltip (Tooltip) ผ่าน JavaScript:
$ ('#ตัวระบุ') คำแนะนำเครื่องมือ (ตัวเลือก)ปลั๊กอินคำแนะนำเครื่องมือไม่เหมือนเมนูแบบเลื่อนลงและปลั๊กอินอื่น ๆ ที่กล่าวถึงก่อนหน้านี้ไม่ใช่ปลั๊กอิน CSS บริสุทธิ์ ในการใช้ปลั๊กอินคุณต้องเปิดใช้งานโดยใช้ jQuery (อ่าน JavaScript) ใช้สคริปต์ต่อไปนี้เพื่อเปิดใช้งานคำแนะนำเครื่องมือทั้งหมดในหน้า:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();});2. ตัวเลือก
มีตัวเลือกบางอย่างที่เพิ่มผ่าน Bootstrap Data API (Bootstrap Data API) หรือเรียกผ่าน JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
สาม. คำแนะนำเครื่องมือ
// ตัวอย่างพื้นฐาน <a href = "#" data-toggle = "tooltip"> html5 </a> // ส่วน JS จำเป็นต้องประกาศ $ ('#ส่วน'). tooltip ();เคล็ดลับเครื่องมือมีคุณสมบัติมากมายในการกำหนดค่าการแสดงผลของพรอมต์ดังนี้:
<a href = "#" rel = "tooltip" data-toggle = "tooltip" data-animation = "false" data-html = "true" data-placement = "auto" data-selector = "a [rel = tooltip]" data-trigger = "คลิก" data-delay = "500"
เพียงลบข้อมูลก่อนหน้าใน JavaScript รวมถึง: ภาพเคลื่อนไหว, HTML, ตำแหน่ง, ตัวเลือก, ต้นฉบับ, ชื่อ, ชื่อ, ทริกเกอร์, ความล่าช้า, คอนเทนเนอร์และเทมเพลตและคุณสมบัติอื่น ๆ
// เมธอด JavaScript $ ('#ส่วน A'). ToolTip ({ล่าช้า: {แสดง: 500, ซ่อน: 100,}, คอนเทนเนอร์: 'body'});มีสี่วิธีสำหรับ JavaScript: แสดงซ่อนสลับและทำลาย
// แสดง $ ('#section a'). คำแนะนำเครื่องมือ ('show'); // ซ่อน $ ('#ส่วน A'). Tooltip ('ซ่อน'); // Invert แสดงและซ่อน $ ('#ส่วน A') Tooltip ('สลับ'); // ซ่อนและทำลาย $ ('มีสี่ประเภทของเหตุการณ์ในคำแนะนำเครื่องมือ
// เหตุการณ์ความคล้ายคลึงกันอื่น ๆ
$ ('#select a'). on ('show.bs.tooltip', function () {Alert ('ฟรีเมื่อมีการเรียกว่ารายการ!');});บทเรียนชุดนี้ได้รวบรวมไว้ใน: Bootstrap พื้นฐานการสอนหัวข้อพิเศษยินดีต้อนรับสู่การคลิกเพื่อเรียนรู้
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน