Bootstrap 5 คำแนะนำ

ตำแหน่งโทษติดตาม

ตำแหน่งโทษติดตามเป็นองค์ประกอบขนาดเล็กที่ปรากฏขึ้นเมื่อผู้ใช้ย้ายคลิกเมาส์ที่องค์ประกอบ:

แนวทางที่จะสร้างตำแหน่งโทษติดตาม

ถ้าต้องการสร้างตำแหน่งโทษติดตาม data-bs-toggle="tooltip" 属性ที่เพิ่มเข้าไปในองค์ประกอบ

ใช้ title 属性กำหนดข้อความที่จะแสดงในตำแหน่งโทษติดตาม

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了！">เปิดโซ่มห์ด้านบนของฉัน!</button>

หมายเหตุ:โทล์ท์บิวต์จำเป็นต้องใช้ JavaScript ในการเริ่มต้นก่อนที่จะสามารถทำงานได้

โค้ดต่อไปนี้จะใช้งานโทล์ท์บิวต์ทั้งหมดในเอกสาร:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
)
</script>

ลองทดสอบเอง

ตำแหน่งโทล์ท์บิวต์

โดยเริ่มต้น โทล์ท์บิวต์จะปรากฏขึ้นในบริเวณด้านบนขององค์ประกอบ

ใช้ data-bs-placement ตั้งค่าตำแหน่งของโทล์ท์บิว์ตในบริเวณด้านบน ด้านล่าง ด้านซ้าย หรือด้านขวาขององค์ประกอบ:

ตัวอย่าง

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="เลยทีเดียว!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="เลยทีเดียว!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="เลยทีเดียว!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="เลยทีเดียว!">Hover</a>

ลองทดสอบเอง