สอนใช้งาน Bootstrap 4

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

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

การใช้งาน Popover

การตั้งค่า HTML สำหรับ Popover: Popover สามารถใช้งานได้โดยการเพิ่ม data-toggle="popover" ไปยังองค์ประกอบที่ต้องการให้ Popover ปรากฏ เช่น ปุ่มหรือลิงก์

ตัวอย่าง

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

การเริ่มใช้งาน Popover ด้วย JavaScript: Popover ต้องการการทำงานร่วมกับ JavaScript โดยสามารถเปิดการใช้งานได้ด้วยคำสั่ง jQuery

JavaScript
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

ตัวอย่างรูปแบบการใช้งาน Popover

การแสดง Popover โดยใช้ปุ่ม

HTML
<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover Title" data-content="Popover ที่แสดงจากปุ่ม">
    แสดง Popover
</button>

การกำหนดทิศทางการแสดง Popover: Bootstrap 4 มีตำแหน่งที่สามารถกำหนดให้ Popover แสดงได้ เช่น ด้านบน (top), ด้านล่าง (bottom), ด้านซ้าย (left), ด้านขวา (right)

HTML
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" title="Popover Title" data-content="Popover อยู่ด้านบน">
    Popover ด้านบน
</button>

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" title="Popover Title" data-content="Popover อยู่ด้านขวา">
    Popover ด้านขวา
</button>

Popover ที่ใช้ HTML เป็นเนื้อหา: Popover สามารถใส่ HTML ลงในเนื้อหาได้โดยการกำหนดค่า html: true ใน JavaScript

HTML
<button type="button" class="btn btn-warning" data-toggle="popover" data-html="true" title="Popover Title" data-content="<b>เนื้อหาที่เป็น HTML</b><br>เพิ่มข้อความหรือ <i>ลิงก์</i>">
    Popover พร้อม HTML
</button>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({ html: true });
});
</script>

การใช้งาน Popover ด้วยการคลิก: Popover สามารถตั้งค่าให้แสดงผลเมื่อมีการคลิก โดยกำหนด event เป็น 'click'

HTML
<a href="#" class="btn btn-info" id="popoverOnClick" data-toggle="popover" data-content="นี่คือ Popover ที่แสดงด้วยการคลิก">
    คลิกเพื่อแสดง Popover
</a>

<script>
$(document).ready(function(){
    $('#popoverOnClick').popover({ trigger: 'click' });
});
</script>

Popover แบบ Manual Control: สามารถควบคุมการแสดงและซ่อน Popover ได้ด้วยการใช้คำสั่ง JavaScript เช่น .popover('show'), .popover('hide'), .popover('toggle')

HTML
<button type="button" class="btn btn-success" id="showPopover">แสดง Popover</button>
<button type="button" class="btn btn-danger" id="hidePopover">ซ่อน Popover</button>

<button type="button" class="btn btn-primary" id="manualPopover" data-toggle="popover" title="Popover Title" data-content="Popover ที่ควบคุมด้วย JavaScript">
    ปุ่มควบคุม Popover
</button>

<script>
$(document).ready(function(){
    $('#manualPopover').popover();

    $('#showPopover').click(function() {
        $('#manualPopover').popover('show');
    });

    $('#hidePopover').click(function() {
        $('#manualPopover').popover('hide');
    });
});
</script>

Popover กับการใช้งานร่วมกับ Tooltip: หากต้องการใช้ Popover และ Tooltip ร่วมกัน ควรระมัดระวังไม่ให้เกิดการชนกันของการแสดงผล โดยควรกำหนดเฉพาะองค์ประกอบที่จำเป็น

สรุป

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

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

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