Bootstrap 4 – Popovers

Popover component được cung cấp bởi bên thư ba, nên bạn cần nhúng thư viện nó vào.

Popover là thư viện thứ 3 (library Tether) nên bạn phải nhúng vào. Tuy nhiên nó cũng được bao gồm trong bộ bootstrap (riêng lẻ trong popover.js hay tất cả trong bootstrap.js, bootstrap.min.js).

Popovers cũng yêu cầu tooltips plugin.

Khởi tạo

Mặc định Bootstrap popovers không được bật, bạn cần thêm đoạn js sau vào bên dưới JQuery.

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

Basic Popover

Sử dụng data-toggle=”popover” để tạo Popover và data-content=”” để cung cấp nội dung khi bật Popover lên.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-content="Mountaineering boots are a type of footwear used in the sport of mountain climbing." style="margin:20px;">
      Click me
    </button>
  </div>

</body>

</html>

Popover Position

Sử dụng data-placement để tùy chỉnh vị trí của Popover khi bật lên. Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

<body>

  <div class="container">
    <div class="text-center">
      <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Chelsea boots are close-fitting, ankle-high boots with an elastic side panel." style="margin:40px;">
        Click me
      </button>
      <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Dress boots are short leather boots worn by men." style="margin:40px;">
        Click me
      </button>
      <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Cowboy boots are for cowboys." style="margin:40px;">
        Click me
      </button>
      <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Ski boots are for skiing... duh!" style="margin:40px;">
        Click me
      </button>
      </div>
  </div>

</body>

</html>

Popover Title

Title của element sẽ trở thành title của Popover khi nó bật lên.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" title="Jodhpur Boot" data-toggle="popover" data-placement="right" data-content="An ankle boot designed as a riding boot with a rounded toe and a low heel." style="margin:40px;">
      Click me
    </button>
  </div>

</body>

</html>

Closing Popovers

Mặc định, Popovers sẽ được close khi bạn click vào button đã bật nó lên 1 lần nữa.

Nếu muôn khi click vào bất kỳ vị trí nào (Trừ vị trí button) Popover sẽ đóng lại bạn có thể sử dụng data-trigger=”focus”.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Now click somewhere else">
      Click me
    </button>
  </div>

</body>

</html>

Popovers on Hover

Theo mặc định, sự kiện để bật Popover lên là click, bạn có thể thay đổi thành rê chuột bằng cách sử dụng data-trigger=”hover”.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

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

<body>

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
      Hover over me
    </button>
  </div>

</body>

</html>