Bootstrap Tooltip Plugin
ปลั๊กอินคำแนะนำเครื่องมือ
ปลั๊กอินคำแนะนำเครื่องมือเป็นกล่องป๊อปอัปขนาดเล็กที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:
เคล็ดลับ: สามารถรวมปลั๊กอินแยกกันได้ (โดยใช้ไฟล์ "tooltip.js" ของ Bootstrap) หรือรวมเข้าด้วยกัน (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js")
วิธีสร้างคำแนะนำเครื่องมือ
หากต้องการสร้างคำแนะนำเครื่องมือ ให้เพิ่มdata-toggle="tooltip"
แอตทริบิวต์ลงในองค์ประกอบ
ใช้titleแอตทริบิวต์เพื่อระบุข้อความที่ควรจะแสดงภายในคำแนะนำเครื่องมือ:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
หมายเหตุ:คำแนะนำเครื่องมือต้องเริ่มต้นด้วย jQuery: เลือกองค์ประกอบที่ระบุและเรียกtooltip()วิธีการ
รหัสต่อไปนี้จะเปิดใช้งานคำแนะนำเครื่องมือทั้งหมดในเอกสาร:
ตัวอย่าง
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
เคล็ดลับเครื่องมือการวางตำแหน่ง
โดยค่าเริ่มต้น คำแนะนำเครื่องมือจะปรากฏที่ด้านบนขององค์ประกอบ
ใช้data-placementแอตทริบิวต์เพื่อกำหนดตำแหน่งของคำแนะนำเครื่องมือด้านบน ด้านล่าง ด้านซ้ายหรือด้านขวาขององค์ประกอบ:
ตัวอย่าง
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
เคล็ดลับ:คุณยังสามารถใช้data-placementแอตทริบิวต์ที่มีค่า " auto" ซึ่งจะทำให้เบราว์เซอร์กำหนดตำแหน่งของคำแนะนำเครื่องมือได้ ตัวอย่างเช่น หากค่าคือ " auto left" คำแนะนำเครื่องมือจะแสดงทางด้านซ้ายเมื่อเป็นไปได้ ไม่เช่นนั้นจะอยู่ที่ด้านขวา
การอ้างอิงคำแนะนำเครื่องมือ Bootstrap ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกคำแนะนำเครื่องมือ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Tooltip Referenceของเรา