ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrapปลั๊กอินเคล็ดลับ


ปลั๊กอินเคล็ดลับ

ปลั๊กอินเคล็ดลับที่มีขนาดเล็กกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ:

วางเมาส์เหนือฉัน

เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ 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 อ้างอิง