Bootstrap 4 - Bootstrap Popover
Chú thích Popover
Popover Boostrap là một dạng tooltip trong Bootstrap hỗ trợ hiện thị thông tin ghi chú khá đẹp, không chỉ hỗ trợ hiện thị nội dung dưới dạng text mà còn cho phép hiện thị nội dung với cấu trúc html phức tạp mang lại hiệu quả và tính thẩm mỹ cao trong phát triển layout website. Tuy nhiên, popover khác tooltip ở chỗ bạn click chuột vào phần tử thì popover mới xuất hiện còn tooltip thì chỉ cần hover vào phần tử là tooltip hiển thị. Như tooltip, popover là plugin độc lập của Bootstrap nên bạn có thể nhúng popover.js hoặc sử dụng bootstrap.js hoặc bootstrap.min.js
Sử dụng Popover
Khai báo sử dụng popover khá đơn giản, ở phần html các bạn sử dụng đoạn mã sau:
<button type="button" data-toggle="popover" title="Popover title" data-content="Here's some amazing content.">Click to toggle popover</button>
Các thuộc tính của popover
- data-toggle=”popover”: Đây là thuộc tính bắt buộc không thể thiếu để có thể hiển thị được popover.
- title: Là tiêu đề của popover sẽ hiện ra
- data-content: Nội dung trong popover
Tất nhiên, chúng ta phải khai báo đoạn mã javascript dưới đây để hoàn thành bước tạo popover:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Cuối cùng đoạn mã sau:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
<button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
<button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
<p><strong>Note:</strong> Click on the buttons to display/hide the popover.</p>
</div>
Vị trí của Popover
Tương tự như Tooltip, popover cũng được thiết lập hiển thị ở 4 vị trí khác nhau: top, bottom, left, right dựa vào thuộc tính data-placement.
- Popover ở vị trí Top
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover</button>
</div>
Popover ở vị trí Bottom
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
<button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
</div>
Popover ở vị trí Left
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
Popover ở vị trí Right
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
<button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Another popover">Another popover</button>
</div>
Popover ở vị trí auto
Trường hợp bạn không muốn cố định popover ở 1 vị trí thì bạn có thể thiết lập giá trị data-placement = “auto”, khi đó trình duyệt sẽ quyết định nên hiển thị popover ở vị trí thích hợp.
Ẩn popover khi click vào chính nó
Một điều dễ dàng thấy là để hiển thị popover, chúng ta phải click vào phần tử được chọn và để ẩn popover, phải click lần 2 vào phần tử đó. Tuy nhiên, có 1 cách khác để ẩn popover mà không click vào phần tử được chọn. Rất đơn giản, hãy sử dụng focus để ẩn popover khi click và popover đó. Các bạn cũng có thể click ra ngoài để ẩn popover. Để kích hoạt được điều này, bạn chỉ cần khai báo trigger: 'focus' trong đoạn mã javascript như dưới đây
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top'
});
});
</script>
<div class="popover-demo mb-2" style="margin-top:100px">
<a href="#" class="btn btn-primary" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Default popover">Popover</a>
<a href="#" class="btn btn-success" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Another popover">Another popover</a>
<a href="#" class="btn btn-info" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</a>
<a href="#" class="btn btn-warning" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="The last tip!">Last popover</a>
</div>
<p><strong>Note:</strong> Click on the buttons to show/hide the popover.</p>
hiepsiitbs6