Bootstrap 4 เคล็ดลับเครื่องมือ
Bootstrap 4 เคล็ดลับเครื่องมือ
คอมโพเนนต์คำแนะนำเครื่องมือคือกล่องป๊อปอัปขนาดเล็กที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:
วิธีสร้างคำแนะนำเครื่องมือ
หากต้องการสร้างคำแนะนำเครื่องมือ ให้เพิ่ม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>
การอ้างอิงคำแนะนำเครื่องมือ Bootstrap ที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกคำแนะนำเครื่องมือ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Tooltip Referenceของเรา