การใช้งาน Bootstrap 5

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

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

การใช้งาน Popover เบื้องต้น

การสร้าง Popover สามารถทำได้ง่ายๆ โดยใช้แอตทริบิวต์ data-bs-toggle และ data-bs-content เพื่อกำหนดข้อความที่จะปรากฏใน Popover

ตัวอย่าง: การแสดง Popover บนปุ่ม

HTML
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="นี่คือข้อความใน Popover">
  คลิกเพื่อแสดง Popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>
  • data-bs-toggle="popover": เป็นการระบุว่าองค์ประกอบนี้จะมีการแสดง Popover
  • data-bs-content: เป็นข้อความที่จะแสดงใน Popover

การกำหนดตำแหน่งของ Popover

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

ตัวอย่าง: Popover ที่แสดงตำแหน่งต่างๆ

HTML
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover ด้านบน">
  Popover ด้านบน
</button>

<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover ด้านขวา">
  Popover ด้านขวา
</button>

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover ด้านล่าง">
  Popover ด้านล่าง
</button>

<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover ด้านซ้าย">
  Popover ด้านซ้าย
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

การใช้ HTML ภายใน Popover

หากต้องการแสดงเนื้อหาแบบ HTML ใน Popover เราสามารถทำได้โดยการตั้งค่า data-bs-html="true" และใช้ HTML ภายใน data-bs-content

ตัวอย่าง: Popover ที่แสดง HTML

HTML
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-html="true" data-bs-content="<strong>ข้อความที่เป็น</strong> <em>HTML</em>">
  Popover แบบ HTML
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>
  • data-bs-html="true": ระบุว่า Popover นี้จะยอมให้แสดงผล HTML ได้
  • data-bs-content: สามารถใส่ HTML ที่ต้องการจะแสดงได้ในแอตทริบิวต์นี้

การเปิดและปิด Popover ด้วย JavaScript

นอกจากการแสดง Popover ผ่าน HTML แล้วยังสามารถควบคุมการแสดงและซ่อน Popover ผ่าน JavaScript ได้ด้วย

ตัวอย่าง: เปิดและปิด Popover ด้วย JavaScript

HTML
<button type="button" class="btn btn-primary" id="myPopover" data-bs-toggle="popover" data-bs-content="Popover ควบคุมด้วย JavaScript">
  เปิด/ปิด Popover ด้วย JS
</button>

<script>
  var popover = new bootstrap.Popover(document.getElementById('myPopover'))

  // เปิด Popover
  popover.show()

  // ปิด Popover
  popover.hide()

  // Toggle Popover (สลับการแสดง/ซ่อน)
  popover.toggle()
</script>
  • popover.show(): สั่งให้แสดง Popover
  • popover.hide(): สั่งให้ซ่อน Popover
  • popover.toggle(): สลับสถานะระหว่างแสดงและซ่อน Popover

การกำหนดตัวเลือกเพิ่มเติมให้กับ Popover

เราสามารถกำหนดการตั้งค่าเพิ่มเติมให้กับ Popover เช่น การหน่วงเวลาการแสดง หรือการตั้งค่า boundary ของ Popover ได้

ตัวอย่าง: กำหนดตัวเลือกเพิ่มเติม

HTML
<button type="button" class="btn btn-dark" id="myPopover2" data-bs-toggle="popover" data-bs-content="Popover พร้อมตัวเลือกเพิ่มเติม">
  Popover พร้อมตัวเลือกเพิ่มเติม
</button>

<script>
  var popoverOptions = {
    trigger: 'hover',
    delay: { "show": 500, "hide": 100 },
    boundary: 'viewport'
  }
  var popover = new bootstrap.Popover(document.getElementById('myPopover2'), popoverOptions)
</script>
  • trigger: 'hover': เปลี่ยนพฤติกรรมให้แสดง Popover เมื่อผู้ใช้เลื่อนเมาส์เหนือปุ่ม
  • delay: กำหนดเวลาหน่วงการแสดงและการซ่อน Popover
  • boundary: กำหนดขอบเขตที่ Popover จะถูกแสดง (เช่น viewport)

สรุป

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

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

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