Home >>Bootstrap Tutorial >Bootstrap Popover

Bootstrap Popover

A Bootstrap popover is used to provide small pop-up box. When the user on click mouse pointer over the text then pop-ups will display and provide some textual hints. For this, add data-toggle="popover" and data-placement attribute to an element.

For creating tooltip, you must include the library popper.js for positioning.

Let's take an example of popover:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Popover</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover" data-content="Hello, i'm popover">Click me for pop-up</button>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>
</div>
</body>
</html>

Output:

Positioning Popovers

You can display the popover everywhere to your page by adding data-toggle and data-placement to an element.

Let's take an example of popover positioning:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Popover</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="top" data-content="Hello, i'm popped Top.">
  Popover on top
</button>
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello, i'm popped Right.">
  Popover on right
</button>
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Hello, i'm popped Bottom.">
  Popover on bottom
</button>
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="left" data-content="Hello, i'm popped Left.">
  Popover on left
</button>
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>
</div>
</body>
</html>

Output:

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads