Như chúng ta đã biết tooltip dùng để chú thích cho 1 phần thử nào đó trên trang web. Thế nhưng hạn chế của tooltip là không chứa được nhiều nội dung. Vì vậy bài viết này chúng ta sẽ tìm hiểu thêm 1 thuộc tính khác dùng hiện hộp pop-up khi người dùng nhấn vào phần tử nào đó. Thuộc tính hôm nay chúng ta tìm hiểu là Popover trong Bootstrap 3 các bạn nhé!
Cách tạo Popover
Hãy chắc chắn rằng mình đã nhúng tập tin “popover.js” hoặc “bootstrap.js” hoặc “bootstrap.min.js” vào trang web để định nghĩa popover. Các bước tạo popover như sau:
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.
<div class="container">
<a href="#" data-toggle="popover" title="Phần đầu Popover" data-content="Nội dung bên trong Popover">Hoc.tv</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Trong ví dụ trên, khi bạn nhấn vào liên kết hoc.tv thì sẽ hiện thị ra popover, nhấn 1 lần nữa thì popover sẽ biến mất.
Vị trí popover
Tương tự như tooltip thì popover cũng dùng thuộc tính data-placement để định nghĩa vị trí hiển thị popover (top, bottom, left, right).
<div class="container">
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Nội dung">Hoc.TV</a>
<br/>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Nội dung">Hoc.TV</a>
<br/>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Nội dung">Hoc.TV</a>
<br/>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Nội dung">Hoc.TV</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Đóng Popover
Từ 2 ví dụ trên chúng ta có thể dễ dàng thấy được popover sẽ được đóng nếu bạn nhấn chuột vào phần tử lúc mở 1 lần nữa. Thế nhưng nếu muốn chúng ta có thể dùng thuộc tính data-trigger=”focus” để đóng popover khi nhấn chuột ngoài vùng phần tử đóng.
<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>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>Ẩ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 popup vào trang web đó là sửa dụng popover trong Bootstrap 3. 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
