สอนใช้งาน Bootstrap 4

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

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

การสร้าง Tooltip

เพื่อสร้าง Tooltip เราสามารถใช้ HTML Element และกำหนดแอตทริบิวต์ data-toggle และ title ดังนี้

HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="ข้อมูลเพิ่มเติม">Hover me</button>

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

หลังจากสร้าง Tooltip แล้ว เราต้องเปิดใช้งานด้วย JavaScript

HTML
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
</script>

ตัวอย่าง Tooltip ที่แตกต่างกัน

Tooltip ด้านบน

HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip ด้านบน" data-placement="top">Hover me</button>

Tooltip ด้านล่าง

HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip ด้านล่าง" data-placement="bottom">Hover me</button>

Tooltip ด้านซ้าย

HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip ด้านซ้าย" data-placement="left">Hover me</button>

Tooltip ด้านขวา

HTML
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip ด้านขวา" data-placement="right">Hover me</button>

การปรับแต่ง Tooltip

เราสามารถปรับแต่ง Tooltip ได้โดยการเพิ่มตัวเลือกในฟังก์ชัน tooltip()

HTML
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({
      animation: true,
      delay: { "show": 500, "hide": 100 },
      html: true,
      placement: 'top'
    });
  });
</script>

การใช้งาน Tooltip ร่วมกับ Popover

เราสามารถใช้ Tooltip ร่วมกับ Popover เพื่อแสดงข้อมูลที่มีรายละเอียดมากขึ้น

HTML
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover Title" data-content="นี่คือเนื้อหาของ Popover.">Click me</button>

สรุป

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

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

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