Popovers In Bootstrap With Examples

Posted By Bajarangi soft , Posted On 12-10-2020

Bootstrap popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. In popover if you click on any element that you include in your script, it will give a particular message as a popover and you can see your message as you defined in the script.

It is easy to implement popovers on a website using Bootstrap as you just need to define a few attributes for the element as described below:
Syntax:

data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

The data-toggle attribute defines the Popover, title attribute defines the Tile for the Popover and data-content attribute is used to store the content to be displayed in the respective Popover Include the below javascript in your code to make it work.

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

Example:1

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>

    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h3>Popover Example</h3>
    <a href="#" data-toggle="popover"
       title="Popover Header"
       data-content="Some content inside the popover">GeeksforGeeks</a>
</div>

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

Different types of Popover orientation in Bootstrap

Top Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = “top”.

Example:2

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script> <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>

    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>

<body>
<!---pop Over Top alignments--->
<div class="container">
    <h3>Popover Example</h3>
    <ul class="list-inline">
        <li><a href="#" title="Header"
               data-toggle="popover"
               data-placement="top"
               data-content="Content">
 BAJARANGI SOFT
        </a>
        </li>
    </ul>
</div>
<!---pop over Left Alignment--->
<div class="container">
<h3>Popover Example</h3>
<ul class="list-inline">
    <li><a href="#" title="Header"
           data-toggle="popover"
           data-placement="left"
           data-content="Content">
        BAJARANGI SOFT
    </a>
    </li>
</ul>
</div>
<!----pop over Right Alignment ---->
<div class="container">
    <h3>Popover Example</h3>
    <ul class="list-inline">
        <li><a href="#" title="Header"
               data-toggle="popover"
               data-placement="right"
               data-content="Content">
            BAJARANGI SOFT
        </a>
        </li>
    </ul>
</div>
<!---Pop Over bottom Alignment---->

<div class="container">
    <h3>Popover Example</h3>
    <ul class="list-inline">
        <li><a href="#" title="Header"
               data-toggle="popover"
               data-placement="bottom"
               data-content="Content">
            BAJARANGI SOFT
        </a>
        </li>
    </ul>
</div>




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

Related Post

What Is The Input Groups In Bootstrap 4
What Is The Custom Form Control Class In Bootstrap 4
How To Make a Bootstrap 4 Carousel Responsive
How To Create a Modal In Bootstrap 4
How To Create a Tooltip In Bootstrap 4
How To Create Popover In Bootstrap 4
How To Create A Toast In bootstrap
What Is Scrollspy With Examples In Bootstrap
What Is The Purpose of Bootstrap Utility Classes
How To Put an Iocns Inside a Input Field In Bootstrap
How To Declare a Media Query In Bootstrap
What is Col Xs in bootstrap?