How to insert image inside Bootstrap popover?

How to insert image inside Bootstrap popover?

Asked on November 1, 2018 in Bootstrap.
Add Comment


  • 1 Answer(s)

    The content option is passed to the Bootstrap .popover() method to insert the images inside the popovers.
    This option can be also set by using the data-content attribute.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Show Images in Bootstrap Popovers</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'top',
            trigger : 'hover',
            html : true,
            content : '<div class="media"><a href="#" class="pull-left"><img src="images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
        });
    });
    </script>
    <style type="text/css">
        .bs-example{
            margin: 200px 150px 0;
        }
    </style>
    </head>
    <body>
        <div class="bs-example">
            <button type="button" class="btn btn-primary" data-toggle="popover">Popover without Title</button>
            <button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>
        </div>
    </body>
    </html>
    
    Answered on November 1, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.