Sử dụng Popover Boostrap hiện thị thông tin chú thích dạng tooltip

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.

1. Chuẩn bị.

- Trong phần head website, chúng ta cần đưa vào các thư viện bootstrap, bao gồm css và javascript file.

<title>Popover Bootstrap Example | Thuyvk's Blog</title>
  <!--css-->
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <!--javascript-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

- Thư viện bootstrap các bạn có thể download ở ví dụ đính kèm cuối bài viết hoặc download trực tiếp tại đây

2. 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

<a href="#" class="btn btn-info btn-open-popover" title="Title popover" data-content="Some text content popover" data-placement="right">Click Me!</a>

- Trong đó chú ý một số tham số sau:

  1. title: Là tiêu đề của popover sẽ hiện ra
  2. data-content: Nội dung trong popover
  3. data-placement: vì trí hiển thị popover (left, right, top, bottom)

- Tiếp theo là phần mã javascript 

$(function () {
      $('.btn-open-popover').popover();
    });

3. Tùy chọn nâng cao.

- Trong một số trường hợp các bạn sẽ cần nhiều nội dung hiện thị hơn là chỉ là 1 vài dòng text đơn giản. Lúc đó chúng ta sẽ cần thêm 1 số cấu hình như sau

HTML:

<!--button open popover-->
        <a href="#" class="btn btn-default" id="a-popover">Click Me!</a>
        <!--content html-->
        <div id="divContentHTML" style="display:none">
          <p style="color:red">Hello World</p>
          <p style="color:green">Hello World</p>
          <p style="color:blue">Hello World</p>
        </div>

- Trong đó #divContentHTML là nội dung bạn muốn trình bày theo định dạng HTML

Javascript:

$(function () {
      //popover option
      $("#a-popover").popover({
        title: 'Twitter Bootstrap Popover',
        content: $('#divContentHTML').html(),
        placement: 'right',
        html: true
      });
    });

- Chú ý tham số html phải gán giá trị = true thì HTML mới hiển thị đúng trong nội dung popover được mở ra.

- Để đóng popover được mở ra bằng cách click chuột ra phía ngoài, ta dùng hàm sau

//close popover when click outsite
      $('body').on('click', function (e) {
        $('.a-popover').each(function () {
          if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
          }
        });
      });

Các bạn download ví dụ ở file đính kèm cuối bài viết.

Download Source

Related Post


Một số thủ thuật nhỏ trong phát triển layout bằng bootstrap
Monday, May 26, 2014
Bài này mình muốn giới thiệu một số thủ thuật nhỏ mình rút kinh nghiệm được trong quá trình sử dụng bootstrap để phát triển layout, tuy chỉ là những đoạn code nhỏ nhưng nếu không biết có thể mất khá nhiều thời gian để lục lọi trên google giống như mình
Sử dụng date-picker trong bootstrap
Wednesday, May 21, 2014
Datepicker jquery plugin hiện tại rất nhiều và không khó để sử dụng, tuy nhiên với những bạn đang phát triển giao diện sử dụng framework bootstrap thì theo mình sử dụng date-picker này là đơn giản và hiệu quả nhất
Search

Đăng ký nhận bài mới


Category

Blog Archive