TiP : Bạn cũng có thể thiết lập data-placement với giá trị là auto, khi đó bạn đã cho phép Browser quyết định vị trí của Tooltip.

Cho ví dụ là data-placemenet = “auto-left”, thì Tooltip sẽ hiển thị bên trái khi có thể. Ngược lại, khi bên trái không thể hiển thị thì trình duyệt sẽ quyết định Tooltip được hiển thị bên phải.

B.    CÁCH SỬ DỤNG POPOVER VỚI BOOTSTRAP

+ Create một Popover :

Popover cũng tương tự như Tooltip; Popover là một pop-up box xuất hiện khi người dùng hover hoặc clicks trên phần tử.

Để Create một Popover cho một phần tử chúng ta sử dụng thuộc tính data-toggle=”popover”

Thuộc tính title được sử dụng để thiết lập Header Text cho Popover và Thuộc tính data-content chỉ định định Text sẽ hiển thị bên trong nội dung của Popover / Popover’s Body

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

Chúng ta khởi tạo Tooltip với jQuery như sau :

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

Chú giải : Đoạn Code với jQuery ở trên, chúng ta đã enable tất cả popover trong Document HTML chứa code.

EX :

<a href=”#” data-toggle=”popover” title=”Hiển thị Tiêu Đề Popover” data-content=”Nội Dung hiển thị của Popover”> * Hiển Thị Popover * </a>

+ THIẾT LẬP VỊ TRÍ CHO POPOVER

Mặc định Popover được định vị trí bên phải của phần tử.

Định vị trí cho Popover chúng ta sử dụng thuộc tính data-placement để thiết lập vị trí Tooltip là top, bottom, left hoặc right bên cạnh phần tử.

Chúng ta có :

• Data-placement=”top” 
• Data-placement=”bottom”
• Data-placement=”left” 
• Data-placement=”right”

+ HTML & Bootstrap :

TẠI VÍ DỤ NÀY CHÚNG TA CÓ SỬ DỤNG THÊM CÁC THUỘC TÍNH

data-trigger=”focus”

KHI NGƯỜI DÙNG CLICKS CHUỘT VÀO PHẦN TỬ THÌ POPOVER SẼ HIỂN THỊ VÀ ĐỒNG THỜI KHI NGƯỜI DÙNG CLICKS THÊM MỘT LẦN NỮA TẠI VỊ TRÍ BẤT KÌ NÀO THÌ POPOVER SẼ KHÔNG HIỂN THỊ NỮA.

data-trigger=”hover”

KHI NGƯỜI DÙNG HOVER CHUỘT TRÊN PHẦN TỬ THÌ POPOVER SẼ HIỂN THỊ VÀ KHI CHUỘT KHÔNG CÒN HOVER TRÊN PHẦN TỬ THÌ POPOVER SẼ KHÔNG HIỂN THỊ NỮA

<div class="container">
  <h3>VÍ DỤ HIỂN THỊ POPOVER BẰNG
BOOTSTRAP :</h3>
  <p>Chúng ta thiết lập các vị trí Top; Bottom; Left; Right cho một POPOVER :</p>
  <ul class="list-inline">
    <li><a href="#"
class="btn btn-info btn-xs" role="button" data-toggle="popover"
data-trigger="focus" data-placement="top" title="Top
: Mưa Lụt Miền Trung!" data-content="lŨ Lụt tại TP Đà Nẵng diễn biến
nghiêm trọng">Thiên Tai Thảm Hoạ</a></li>
    <li><a href="#"
class="btn btn-info btn-xs" role="button" data-toggle="popover"
data-trigger="focus" data-placement="bottom" title="Bootom
: Khí Hậu Lạnh Gió Mùa!" data-content="Miền Bắc ngập trong không khí
lạnh đầu mùa">Mùa Đông Tháng 10</a></li>
    <li><a href="#"
class="btn btn-info btn-xs" role="button" data-toggle="popover"
data-trigger="hover" data-placement="left" title="Left
: Việt Nam Cuối Năm!" data-content="Mua hoa đào cho tết từ bây giờ tại
Lai Châu">Tết Cổ Truyền</a></li>
    <li><a href="#"
class="btn btn-info btn-xs" role="button" data-toggle="popover" data-trigger="hover"
data-placement="right" title="Right : Thành Phố Thủ Đức -
Trực Thuộc TP HCM!" data-content="Những diễn biến cho trọng điểm TP
HCM">TP Thủ Đức</a></li>
  </ul>
</div>
 
 
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

+ HÌNH ẢNH KẾT QUẢ :