Tạo pop up với Popover trong Bootstrap 4

Một hạn chế của tooltip khi dùng để chú thích chú giải nội dung là không chứa được nhiều nội dung. Thật may mắn ngoài Tooltip thì Bootstrap 4 cung cấp cho người dùng 1 thuộc tính khác đó là Popover. Popover trong Bootstrap 4 được sử dụng để hiện hộp pop-up khi người dùng nhấn vào phần tử nào đó, chúng ta cùng tìm hiểu về nó nhé!

Cách tạo Popover trong Bootstrap 4

Để tạo Popover trong Bootrap 4 chúng ta thêm thuộc tính data-toggle="popover" vào phần tử,

Sử dụng thuộc tính title để đặc tả phần đầu văn bản của popover

Dùng thuộc tính data-content để đặc tả văn bản hiển thị bên trong nội dung popover.

Lưu ý: Popover phải được khởi tạo bằng jQuery: chọn phần tử được chỉ định và gọi phương thức popover ().

Đoạn mã sau sẽ cho phép bật tất cả các popover  trong tài liệu:

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

Ví dụ:

<div class="container">
  <h3>Ví dụ Popover HocTV</h3>
  <a href="#" data-toggle="popover" title="Phần đầu Popover " data-content="Nội dung Popover">Ví dụ popover</a>
</div>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>

Định vị Popovers

Theo mặc định, cửa sổ bật lên sẽ xuất hiện ở phía bên phải của phần tử.

Sử dụng data-placement  để đặt vị trí của cửa sổ bật lên ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử:

• data-placement="top" : Đặt Popoversở trên cùng
• data-placement="bottom" : Đặt Popovers ở dưới cùng
• data-placement="left"  : Đặt Popovers ở bên trái
• data-placement="right" : Đặt Popovers ở bên phải

<div class="container">
  <h3>Popover Example</h3>  
  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
</div>


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

Lưu ý: Các thuộc tính vị trí không hoạt động như bạn mong đợi nếu nó không đủ chỗ cho chúng. Ví dụ: nếu bạn sử dụng vị trí trên cùng ở đầu trang (nơi không có chỗ cho nó), thay vào đó, nó sẽ hiển thị cửa sổ bật lên bên dưới phần tử hoặc bên phải (bất cứ nơi nào có chỗ cho nó).

Đóng Popovers

Theo mặc định, cửa sổ bật lên bị đóng khi bạn nhấp lại vào phần tử. Tuy nhiên, bạn có thể sử dụng thuộc tính data-trigger = "focus" sẽ đóng cửa sổ bật lên khi nhấp vào bên ngoài phần tử:

<div class="container">
    <a href="#" title="Đóng popover" data-toggle="popover" data-trigger="focus" data-content="Hãy nhấn chuột lên bất cứ nơi nào ngoài liên kết để đóng popover">Hoc.TV</a>
</div>

Ẩn hiện Popover khi hover chuột

Chúng ta có thể dùng thuộc tính  data-trigger="hover" nếu muốn rê chuột vào phần tử thì mở popover và rê chuột ra ngoài thì đóng lại

<div class="container">
    <a href="#" title="Tiêu đề" data-toggle="popover" data-trigger="hover" data-content="Nội dung">Hoc.TV</a>
</div> 
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>

Lời kết:

Như vậy chúng ta đã có thêm 1 cách nữa để chèn chú thích hay popup vào trang web đó là sử dụng popover trong Bootstrap 4. Tùy vào nội dung bạn chèn mà sử dụng cho hợp lý nhé. Chúc các bạn học tốt!