Bài 16: Sử dụng Popovers trong Bootstrap

Bài 16: Sử dụng Popovers trong Bootstrap

Popovers trong Bootstrap để tạo cửa sổ bật lên, bạn có thể dùng nó để giải thích cho một thành phần nào đó chẳng hạn.

Ở bài trước chúng ta đã tìm hiểu về Pagination trong Bootstrap để phân trang rồi hôm nay chúng ta sẽ tiếp tục với thành phần mới này nhé.

Cách sử dụng Popovers trong Bootstrap

Để sử dụng được chức năng này bạn phải sử dụng thêm một đoạn code javascript nữa.

Trước tiên ta tạo 1 file có tên index.js cùng với thư mục trang html như sau:

// NOTICE!!! Initially embedded in our docs this JavaScript
// file contains elements that can help you create reproducible
// use cases in StackBlitz for instance.
// In a real project please adapt this content to your needs.
// ++++++++++++++++++++++++++++++++++++++++++

/*!
 * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

/* global bootstrap: false */

(() => {
  'use strict'

  // --------
  // Tooltips
  // --------
  // Instantiate all tooltips in a docs or StackBlitz
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
    .forEach(tooltip => {
      new bootstrap.Tooltip(tooltip)
    })

  // --------
  // Popovers
  // --------
  // Instantiate all popovers in docs or StackBlitz
  document.querySelectorAll('[data-bs-toggle="popover"]')
    .forEach(popover => {
      new bootstrap.Popover(popover)
    })

  // -------------------------------
  // Toasts
  // -------------------------------
  // Used by 'Placement' example in docs or StackBlitz
  const toastPlacement = document.getElementById('toastPlacement')
  if (toastPlacement) {
    document.getElementById('selectToastPlacement').addEventListener('change', function () {
      if (!toastPlacement.dataset.originalClass) {
        toastPlacement.dataset.originalClass = toastPlacement.className
      }

      toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
    })
  }

  // Instantiate all toasts in docs pages only
  document.querySelectorAll('.bd-example .toast')
    .forEach(toastNode => {
      const toast = new bootstrap.Toast(toastNode, {
        autohide: false
      })

      toast.show()
    })

  // Instantiate all toasts in docs pages only
  // js-docs-start live-toast
  const toastTrigger = document.getElementById('liveToastBtn')
  const toastLiveExample = document.getElementById('liveToast')

  if (toastTrigger) {
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show()
    })
  }
  // js-docs-end live-toast

  // -------------------------------
  // Alerts
  // -------------------------------
  // Used in 'Show live alert' example in docs or StackBlitz

  // js-docs-start live-alert
  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
  const appendAlert = (message, type) => {
    const wrapper = document.createElement('div')
    wrapper.innerHTML = [
      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
      `   <div>${message}</div>`,
      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
      '</div>'
    ].join('')

    alertPlaceholder.append(wrapper)
  }

  const alertTrigger = document.getElementById('liveAlertBtn')
  if (alertTrigger) {
    alertTrigger.addEventListener('click', () => {
      appendAlert('Nice, you triggered this alert message!', 'success')
    })
  }
  // js-docs-end live-alert

  // --------
  // Carousels
  // --------
  // Instantiate all non-autoplaying carousels in docs or StackBlitz
  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
    .forEach(carousel => {
      bootstrap.Carousel.getOrCreateInstance(carousel)
    })

  // -------------------------------
  // Checks & Radios
  // -------------------------------
  // Indeterminate checkbox example in docs and StackBlitz
  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
    .forEach(checkbox => {
      if (checkbox.id.includes('Indeterminate')) {
        checkbox.indeterminate = true
      }
    })

  // -------------------------------
  // Links
  // -------------------------------
  // Disable empty links in docs examples only
  document.querySelectorAll('.bd-content [href="#"]')
    .forEach(link => {
      link.addEventListener('click', event => {
        event.preventDefault()
      })
    })

  // -------------------------------
  // Modal
  // -------------------------------
  // Modal 'Varying modal content' example in docs and StackBlitz
  // js-docs-start varying-modal-content
  const exampleModal = document.getElementById('exampleModal')
  if (exampleModal) {
    exampleModal.addEventListener('show.bs.modal', event => {
      // Button that triggered the modal
      const button = event.relatedTarget
      // Extract info from data-bs-* attributes
      const recipient = button.getAttribute('data-bs-whatever')
      // If necessary, you could initiate an Ajax request here
      // and then do the updating in a callback.

      // Update the modal's content.
      const modalTitle = exampleModal.querySelector('.modal-title')
      const modalBodyInput = exampleModal.querySelector('.modal-body input')

      modalTitle.textContent = `New message to ${recipient}`
      modalBodyInput.value = recipient
    })
  }
  // js-docs-end varying-modal-content

  // -------------------------------
  // Offcanvas
  // -------------------------------
  // 'Offcanvas components' example in docs only
  const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
  if (myOffcanvas) {
    myOffcanvas.forEach(offcanvas => {
      offcanvas.addEventListener('show.bs.offcanvas', event => {
        event.preventDefault()
      }, false)
    })
  }
})()

Trong trang html ta gọi nó sau thẻ đóng </body>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="sonnguyenaz" data-bs-content="Chào bạn! Hi vọng mang đến trải nghiệm tuyệt vời trên blog sonnguyenaz.com" aria-describedby="popover816929"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Nhấp để xem</font></font></button>
    <!-- End Example Code -->
  </body>
  <script src="index.js"></script>
</html>

Kết quả là:

popovers-trong-bootstrap-hien-thi-cua-so-bat-len

Điều chỉnh hướng bật cửa sổ

Bạn có thể điều chỉnh hướng bật cửa sổ bằng các thuộc tính sau:

  • data-bs-placement=”top”: Hướng lên trên
  • data-bs-placement=”left”: Hướng sang trái
  • data-bs-placement=”right”: Hướng sang phải
  • data-bs-placement=”bottom”: Hướng xuống dưới

Nhưng có một lưu ý là khi không đủ vùng chứa thì mặc định nó sẽ hướng về phía có đủ khoảng trống để hiển thị.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div style="margin:400px;">
    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="sonnguyenaz" data-bs-content="Chào bạn! Hi vọng mang đến trải nghiệm tuyệt vời trên blog sonnguyenaz.com" aria-describedby="popover816929"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Nhấp để xem</font></font></button>
    </div>
	<!-- End Example Code -->
  </body>
  <script src="index.js"></script>
</html>

Kết quả:

dieu-chinh-huong-bat-len

Tùy chỉnh cửa sổ bật lên

Bạn cũng có thể tự điều chỉnh cửa sổ bật lên như màu sắc, kích thước, chỉ cho phép bấm 1 lần hoặc là vô hiệu hóa.

Điều chỉnh màu sắc kích thước Popovers trong Bootstrap

Bạn có thể chèn thêm style này vào đoạn code html để điều chỉnh lại màu sắc và kích thước cho Popovers trong Bootstrap:

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

Code đầy đủ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<style>
	.custom-popover {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-primary);
	--bs-popover-header-bg: var(--bs-primary);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
	}
	</style>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div style="margin:400px;">
    <button type="button" class="btn btn-lg btn-danger" data-bs-custom-class="custom-popover" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="sonnguyenaz" data-bs-content="Chào bạn! Hi vọng mang đến trải nghiệm tuyệt vời trên blog sonnguyenaz.com" aria-describedby="popover816929"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Nhấp để xem</font></font></button>
    </div>
	<!-- End Example Code -->
  </body>
  <script src="index.js"></script>
</html>

Bạn nên nhớ phải gọi data-bs-custom-class=”custom-popover” thì mới hoạt động nhé

Kết quả là:

tuy-chinh-mau-sac-khich-thuoc-cho-popovers

Chỉ cho phép hiện một lần và không tắt

Bạn cũng có thể chỉ cho phép hiển thị khi nhấn vào lần đầu tiên và không tắt được nữa bằng thuộc tính: data-bs-trigger=”focus”

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<style>
	.custom-popover {
	--bs-popover-max-width: 200px;
	--bs-popover-border-color: var(--bs-primary);
	--bs-popover-header-bg: var(--bs-primary);
	--bs-popover-header-color: var(--bs-white);
	--bs-popover-body-padding-x: 1rem;
	--bs-popover-body-padding-y: .5rem;
	}
	</style>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0" >
    <!-- Example Code -->
	<div style="margin:400px;">
    <button type="button" class="btn btn-lg btn-danger" data-bs-trigger="focus" data-bs-custom-class="custom-popover" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="sonnguyenaz" data-bs-content="Chào bạn! Hi vọng mang đến trải nghiệm tuyệt vời trên blog sonnguyenaz.com" aria-describedby="popover816929"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Nhấp để xem</font></font></button>
	</div>
	<!-- End Example Code -->
  </body>
  <script src="index.js"></script>
</html>

Hoặc bạn cũng có thể khóa luôn nút bằng chức năng disabled

Lời kết

Như vậy, mình và các bạn đã tìm hiểu qua về cách sử dụng Popovers trong Bootstrap. Bạn có thể dùng nó khi cảm thấy hợp lý nhé. Chúc các bạn thành công!

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *