JS Tooltip (tooltip.js)
ปลั๊กอินเคล็ดลับที่มีขนาดเล็กกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ
สำหรับการสอนเกี่ยวกับคำแนะนำเครื่องมืออ่านของเรา Bootstrap Tooltip การสอน
ผ่าน data-* แอตทริบิวต์
data-toggle="tooltip" เปิดใช้งานคำแนะนำเครื่องมือ
title แอตทริบิวต์ระบุข้อความที่ควรจะแสดงภายในคำแนะนำเครื่องมือ
ผ่านทางจาวาสคริปต์
คำแนะนำเครื่องมือปลั๊กอินไม่ CSS อย่างเดียวและดังนั้นจึงต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก tooltip() วิธีการ
ตัวอย่าง
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
ลองตัวเอง» ตัวเลือกเคล็ดลับ
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ data- ในขณะที่ data-placement=""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ | ลองมัน |
|---|---|---|---|---|
| animation | boolean | true | ระบุว่าเพื่อเพิ่มผลการเปลี่ยนแปลง CSS จางหายเมื่อการแสดงและซ่อนคำแนะนำเครื่องมือ
| ลองมัน |
| ภาชนะ | สตริงหรือเท็จแบบบูล | เท็จ | ผนวกคำแนะนำเครื่องมือที่จะเป็นองค์ประกอบที่เฉพาะเจาะจง ตัวอย่าง: ภาชนะ: 'body' | ลองมัน |
| delay | number, or object | 0 | ระบุจำนวนมิลลิวินาทีก็จะใช้เวลาในการแสดงและซ่อนคำแนะนำเครื่องมือ เพื่อระบุความล่าช้าในการแสดงและอีกคนหนึ่งในการซ่อนที่ใช้โครงสร้างวัตถุ: delay: {show: 500, hide: 100} - ซึ่งจะใช้เวลา 500 มิลลิวินาทีเพื่อแสดง tooltip แต่เพียง 100 มิลลิวินาทีที่จะซ่อนมัน | ลองมัน |
| html | boolean | false | ระบุว่าจะยอมรับแท็ก HTML ในคำแนะนำเครื่องมือ:
เมื่อตั้งค่าเป็นเท็จ (ค่าเริ่มต้น) jQuery's text() วิธีการจะนำไปใช้ การใช้งานนี้ถ้าคุณมีความกังวลใจเกี่ยวกับการโจมตี XSS | ลองมัน |
| placement | string | "top" | ระบุตำแหน่งคำแนะนำเครื่องมือ ค่าที่เป็นไปได้:
| ลองมัน |
| selector | string, or the boolean false | false | เพิ่มคำแนะนำเครื่องมือที่จะระบุตัวเลือก | ลองมัน |
| template | string | ฐาน HTML เพื่อใช้เมื่อสร้างคำแนะนำเครื่องมือ ชื่อคำแนะนำเครื่องมือจะถูกแทรกลงในองค์ประกอบที่มีระดับ .tooltip-inner สภาพแวดล้อมที่มีระดับ .tooltip-arrow จะกลายเป็นลูกศรคำแนะนำเครื่องมือของ องค์ประกอบที่ห่อหุ้มชั้นนอกสุดควรมี .tooltip ระดับ | ||
| title | string | "" | ระบุข้อความที่ควรจะแสดงภายในคำแนะนำเครื่องมือ | ลองมัน |
| trigger | string | "hover focus" | ระบุว่าคำแนะนำเครื่องมือจะถูกเรียก ค่าที่เป็นไปได้:
| ลองมัน |
| viewport | string, or object | {selector: "body", padding: 0} | ช่วยให้คำแนะนำเครื่องมือภายในขอบเขตขององค์ประกอบนี้ ตัวอย่าง: viewport: '#viewport' หรือ {selector: '#viewport', padding: 0} |
เคล็ดลับวิธีการ
ตารางต่อไปนี้แสดงวิธีการแนะนำเครื่องมือที่มีอยู่ทั้งหมด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .tooltip( options ) | เปิดใช้งานคำแนะนำเครื่องมือที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง | ลองมัน |
| .tooltip("show") | แสดงให้เห็นถึงคำแนะนำเครื่องมือ | ลองมัน |
| .tooltip("hide") | ซ่อนคำแนะนำเครื่องมือ | ลองมัน |
| .tooltip("toggle") | สลับคำแนะนำเครื่องมือ | ลองมัน |
| .tooltip("destroy") | ซ่อนและทำลายคำแนะนำเครื่องมือ | ลองมัน |
เหตุการณ์เคล็ดลับ
ตารางต่อไปนี้แสดงเหตุการณ์คำแนะนำเครื่องมือที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| show.bs.tooltip | เกิดขึ้นเมื่อคำแนะนำเครื่องมือเป็นเรื่องเกี่ยวกับที่จะแสดง | ลองมัน |
| shown.bs.tooltip | เกิดขึ้นเมื่อคำแนะนำเครื่องมือจะแสดงอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
| hide.bs.tooltip | เกิดขึ้นเมื่อคำแนะนำเครื่องมือที่เกี่ยวกับการถูกซ่อนไว้ | ลองมัน |
| hidden.bs.tooltip | เกิดขึ้นเมื่อคำแนะนำเครื่องมือจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
ตัวอย่าง
เคล็ดลับการออกแบบที่กำหนดเอง
ใช้ CSS ในการปรับแต่งรูปลักษณ์ของคำแนะนำเครื่องมือนี้:
ตัวอย่าง
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} ลองตัวเอง»