Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :
InvestmentNovel

Latest Programming Tutorial Blog

Bootstrap 4 Popover Tutorial With Example

/
/
/
57 Views

In Bootstrap 4 Popover Tutorial With Example, you will learn how to create the popover with Bootstrap 4. The Bootstrap 4 popover is a small popup element that appears after clicking an element. You can set the position of popover using data-placement attribute. 

Bootstrap 4 Popover Tutorial With Example

The popover is a small overlay of content that is used to present secondary information of element if it is clicked by a user, like those on the iOS. Popovers rely on the Third-party library Chain for positioning.

#1: Bootstrap 4 Popover

To create a popover,you can add the data-toggle=”popover” attribute to an element. You can use a title attribute to specify the header text of the popover, and use a data-content attribute to specify the text that should be displayed inside the popover’s body.

Popover must be initialized with the jQuery. You can select the specified element and call the popover() method.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Popover Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.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.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Popover Example</h2>
  <br>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
  $(document).ready(function()
  {
    $('[data-toggle="popover"]').popover();      
  });
</script>
</body>
</html>

The example of a Bootstrap popover will look like below screenshot.

Bootstrap 4 Popover Example

#2: Bootstrap 4 Position Popovers

By default, popover will appear on the right side of the element.

You can also change the position whether the popover appears to the rightlefttop, or bottom the element, it is assigned to.

That can be done using the data-placement attribute.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Popover Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.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.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Positioning Popover</h2>
  <br>
  <a href="#" data-toggle="popover" data-placement="top" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
  <a href="#" data-toggle="popover" data-placement="left" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
  <a href="#" data-toggle="popover" data-placement="right" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
  <a href="#" data-toggle="popover" data-placement="bottom" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
  $(document).ready(function()
  {
    $('[data-toggle="popover"]').popover();      
  });
</script>
</body>
</html>

The example of a Bootstrap positioning popover will look like below screenshot.

Bootstrap 4 Positioning Popover Example

#3: Bootstrap 4 Closing Popovers

By default, the popover is closed when you click on the element again.

You can also use a data-trigger=focus attribute which will close the popover when clicking outside the element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Popover Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.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.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Closing Popover</h2>
  <br>
  <a href="#" data-toggle="popover" data-trigger="focus" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
  $(document).ready(function()
  {
    $('[data-toggle="popover"]').popover();      
  });
</script>
</body>
</html>

The example of a Bootstrap closing popover will look like below screenshot.

Bootstrap 4 Closing Popover Example

#4: Bootstrap 4 Closing Hover-triggered

 Popovers

You can apply the value hover instead of focus to make a popover appear when you hover over the element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Popover Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.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.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
  <h2>Hover Popover</h2>
  <br>
  <a href="#" data-toggle="popover" data-trigger="hover" title="header" data-content="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
  $(document).ready(function()
  {
    $('[data-toggle="popover"]').popover();      
  });
</script>
</body>
</html>

The example of a Bootstrap hover-triggered popover will look like below screenshot.

Bootstrap 4 Hover-Triggered Popover Example

At last, our Bootstrap 4 Popover Tutorial With Example is over.
  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This div height required for enabling the sticky sidebar