ปลั๊กอินเคล็ดลับ
ปลั๊กอินเคล็ดลับที่มีขนาดเล็กกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:
เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ Bootstrap's แต่ละบุคคล "tooltip.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "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>
ลองตัวเอง» Positioning คำแนะนำเครื่องมือ
โดยค่าเริ่มต้นเคล็ดลับเครื่องมือจะปรากฏอยู่ด้านบนขององค์ประกอบ
ใช้ 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 left" , คำแนะนำจะแสดงที่ด้านซ้ายเมื่อเป็นไปได้มิฉะนั้นทางด้านขวา
กรอก Bootstrap Tooltip อ้างอิง
สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกคำแนะนำเครื่องมือทุกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Tooltip อ้างอิง