IMG-LOGO
Trang Chủ Chủ Đề Bootstrap 4 Popover
× 1) Bootstrap 4 - Giới Thiệu 2) Bootstrap 4 Containers 3) Bootstrap 4 Grids 4) Bootstrap 4 Text/Typography 5) Bootstrap 4 Colors 6) Bootstrap 4 Tables 7) Bootstrap 4 Images 8) Bootstrap 4 Jumbotron 9) Bootstrap 4 Alerts 10) Bootstrap 4 Buttons 11) Bootstrap 4 Button Groups 12) Bootstrap 4 Badges 13) Bootstrap 4 Progress Bars 14) Bootstrap 4 Spinners 15) Bootstrap 4 Pagination 16) Bootstrap 4 List Groups 17) Bootstrap 4 Cards 18) Bootstrap 4 Dropdowns 19) Bootstrap 4 Collapse 20) Bootstrap 4 Navs 21) Bootstrap 4 Navigation Bar 22) Bootstrap 4 Forms 23) Bootstrap 4 Form Inputs 24) Bootstrap 4 Inputs Group 25) Bootstrap 4 Custom Forms 26) Bootstrap 4 Carousel 27) Bootstrap 4 Modal 28) Bootstrap 4 Tooltip 29. Bootstrap 4 Popover 30) Bootstrap 4 Toast 31) Bootstrap 4 Scrollspy (Advanced) 32) Bootstrap 4 Utilities 33) Bootstrap 4 Flex 34) Bootstrap 4 Icons 35) Bootstrap 4 Media Objects 36) Bootstrap 4 Filters (Advanced) 37) Bootstrap 4 - Form đăng ký tài khoản người dùng

Bootstrap 4 Popover

by GokiSoft.Com - 21:20 11/05/2020 1,253 Lượt Xem

Bootstrap 4 Popover

Popover cũng giống như tooltips; nó là một pop-up box xuất hiện khi người dùng nhấp vào phần tử. Sự khác biệt là popover có thể chứa nhiều nội dung hơn.

Cách tạo một Popover

Để tạo popover, add thuộc tính data-toggle="popover" cho phần tử.

Sử dụng thuộc tính title để chỉ định header text của cửa sổ bật lên, và sử dụng thuộc tính data-content để chỉ định văn bản sẽ được hiển thị bên trong body của popover:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

Note: Popovers phải được khởi tạo với jQuery: chọn phần tử được chỉ định và gọi phương thức popover().

Đoạn code sau sẽ enable tất cả popovers trong trang:

Ví dụ

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

Positioning Popovers

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

Sử dụng thuộc tính data-placement để đặt vị trí của popover là top, bottom, left hoặc right so với phần tử:

Ví dụ

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

Note: Thuộc tính data-placement sẽ không hoạt động nếu theo ý bạn nếu không đủ chỗ. Ví dụ: Nếu bạn đặt data-placement="top" (mà nếu top không có chỗ để hiển thị), thì thay vào đó popover sẽ hiển thị bên dưới hoặc bên phải phần tử (nơi có chỗ để hiển thị).


Đóng Popovers

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

Ví dụ

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>

Tip: Nếu bạn muốn popover hiển thị khi bạn hover phần tử, sử dụng thuộc tính data-trigger="hover":

Ví dụ

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!