การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Tooltip

ใน Bootstrap 5 นั้น Tooltip เป็นเครื่องมือที่มีประโยชน์มากสำหรับการแสดงข้อมูลเสริมหรือคำอธิบายเพิ่มเติมเมื่อผู้ใช้เลื่อนเมาส์ไปวางบนองค์ประกอบต่าง ๆ ของหน้าเว็บ โดย Tooltip สามารถช่วยให้ผู้ใช้ได้รับข้อมูลที่เป็นประโยชน์โดยไม่ต้องแสดงข้อมูลเหล่านั้นตลอดเวลา ทำให้หน้าเว็บดูสะอาดและไม่รก

การใช้งาน Tooltip ขั้นพื้นฐาน

การสร้าง Tooltip สามารถทำได้ง่าย ๆ โดยการเพิ่มแอตทริบิวต์ data-bs-toggle="tooltip" ลงในองค์ประกอบ HTML ที่ต้องการ และกำหนดข้อความของ Tooltip ผ่านแอตทริบิวต์ title

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip ตัวอย่าง">
  ปุ่มนี้มี Tooltip
</button>

ตัวอย่างนี้เป็นการสร้างปุ่มที่เมื่อผู้ใช้เลื่อนเมาส์ไปวางจะเห็น Tooltip ขึ้นมา

การเปิดใช้งาน Tooltip ด้วย JavaScript

เนื่องจาก Tooltip ไม่เปิดใช้งานอัตโนมัติ เราจำเป็นต้องใช้ JavaScript ในการเปิดใช้งาน Tooltip ทั้งหมดในหน้าเว็บ สามารถทำได้ด้วยโค้ดดังนี้

document.addEventListener('DOMContentLoaded', function () {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
});

การปรับแต่งตำแหน่งของ Tooltip

Bootstrap 5 รองรับการกำหนดตำแหน่งของ Tooltip ได้หลายตำแหน่ง เช่น บน (top), ล่าง (bottom), ซ้าย (left), และขวา (right) โดยสามารถกำหนดตำแหน่งผ่านแอตทริบิวต์ data-bs-placement

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip อยู่ด้านบน">
  Tooltip บน
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip อยู่ด้านขวา">
  Tooltip ขวา
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip อยู่ด้านล่าง">
  Tooltip ล่าง
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip อยู่ด้านซ้าย">
  Tooltip ซ้าย
</button>

การใช้งาน HTML ภายใน Tooltip

ในบางกรณี เราอาจต้องการแสดงเนื้อหามากกว่าเพียงแค่ข้อความ เช่น การใช้ HTML ภายใน Tooltip สามารถทำได้โดยกำหนดตัวเลือก html: true ผ่าน JavaScript

<button type="button" class="btn btn-secondary" id="html-tooltip" data-bs-toggle="tooltip" title="<em>Tooltip</em> <u>ด้วย</u> <b>HTML</b>">
  Tooltip HTML
</button>

<script>
  var tooltip = new bootstrap.Tooltip(document.getElementById('html-tooltip'), {
    html: true
  });
</script>

การปรับแต่งการแสดงผลด้วยตัวเลือกเพิ่มเติม

Tooltip ของ Bootstrap 5 ยังสามารถปรับแต่งพฤติกรรมการแสดงผลได้หลากหลาย โดยใช้ตัวเลือกเพิ่มเติมผ่าน JavaScript เช่น การกำหนด delay (ดีเลย์) ในการแสดง Tooltip

<button type="button" class="btn btn-secondary" id="delay-tooltip" data-bs-toggle="tooltip" title="แสดงผลช้า">
  Tooltip ช้า
</button>

<script>
  var tooltip = new bootstrap.Tooltip(document.getElementById('delay-tooltip'), {
    delay: { "show": 500, "hide": 100 }
  });
</script>

การปิดใช้งาน Tooltip บางส่วน

หากต้องการปิดการใช้งาน Tooltip บนองค์ประกอบบางส่วนของหน้าเว็บ สามารถใช้คำสั่ง .dispose() ในการปิดการทำงานได้

var tooltip = new bootstrap.Tooltip(document.getElementById('my-tooltip'));
tooltip.dispose();

การใช้งาน Tooltip ร่วมกับฟอร์ม

Tooltip สามารถนำมาใช้กับองค์ประกอบต่าง ๆ ภายในฟอร์มได้ เช่น ช่วยให้ผู้ใช้เข้าใจรายละเอียดที่ต้องการในการกรอกข้อมูล

<form>
  <div class="mb-3">
    <label for="username" class="form-label" data-bs-toggle="tooltip" title="กรุณากรอกชื่อผู้ใช้">
      ชื่อผู้ใช้
    </label>
    <input type="text" class="form-control" id="username">
  </div>
  <button type="submit" class="btn btn-primary">ส่ง</button>
</form>

สรุป

Tooltip ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยเพิ่มความสะดวกในการให้ข้อมูลเสริมแก่ผู้ใช้ โดยสามารถปรับแต่งให้เหมาะสมกับการใช้งานได้หลายรูปแบบ ไม่ว่าจะเป็นการแสดง Tooltip บนปุ่ม ข้อความ หรือฟอร์ม โดยการกำหนดตัวเลือกต่าง ๆ ผ่าน JavaScript และ HTML อย่างยืดหยุ่น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ