Bootstrap Popover

May 14th, 2020

Prerana Kasar

Bootstrap Popover

A bootstrap popover is an also a javascript function which is similar to the bootstrap tooltip, it is a popup box which is appeared when a user is clicked to an element. The attribute data-toggle with the value popover is used to create the popover.

Example: 1 Bootstrap Popover Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Media Objects Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h2>Bootstrap Popover Example</h2>
        <a href="#" data-toggle="popover" title="Popover Header" data-content="The content of popover">Click Here</a>
    </div>
 
    <script>
        $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
        });
    </script>
</body>
</html>

On the above code the attribute data-toggle with value popover to create bootstrap popover and data-content to write content of the popover.

Bootstrap Popover Position

Bootstrap have data-placement attribute to change the position of the popover. The default position of popover is right side of the element. With data-placement attribute we set top, right, left, bottom position of element.

Example: 2 Bootstrap Popover Position Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Media Objects Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h2>Bootstrap Popover Example</h2>
        <ul class="list-inline">
            <li><a href="#" data-toggle="popover" data-placement="top" title="Popover Header" data-content="The content of popover">Click Here</a></li>
            <li><a href="#" data-toggle="popover" data-placement="bottom" title="Popover Header" data-content="The content of popover">Click Here</a></li>
            <li><a href="#" data-toggle="popover" data-placement="left" title="Popover Header" data-content="The content of popover">Click Here</a></li>
            <li><a href="#" data-toggle="popover" data-placement="right" title="Popover Header" data-content="The content of popover">Click Here</a></li>
        </ul>
    </div>
 
    <script>
        $(document).ready(function(){
        $('[data-toggle="popover"]').popover();   
        });
</script>
</body>
</html>