Syntax error Hide popover using Bootstrap .popover("hide") method

Hide popover using Bootstrap .popover("hide") method

To hide the displayed popover, use the popover(“hide”) method.

Use the method to hide the popover like this −

$(".btn-primary").click(function(){
  $("[data-toggle='popover']").popover('hide');
});

You can try to run the following code to implement the popover(“hide”) method −

Example

Live Demo

<!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/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

<body>

  <div class="container">
    <h3>Example</h3>
    <a href="#" data-toggle="popover" title="Demo Header" data-content="This is demo text!">Info</a>
    <div>
      <p>The following is a demo button:</p>
      <button type="button" class="btn btn-default">Display</button>
      <button type="button" class="btn btn-primary">Hide</button>
    </div>  
  </div>

<script>
  $(document).ready(function(){
    $(".btn-default").click(function(){
      $("[data-toggle='popover']").popover('show');
    });
    $(".btn-primary").click(function(){
      $("[data-toggle='popover']").popover('hide');
    });
  });
</script>

</body>
</html>
Updated on: 2020-06-18T06:59:51+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements