Bootstrap 3 - Popover div html

Question

I based in this example: https://jsfiddle.net/hL0pvaty/

But the popover must contain a html div , therefore, what I want is a mixture between the first and the secon

Answer 1

There is a code for normalization bootstrap popovers:

• multiply popovers

• popovers with close button

• close by click outside the popover

• popover with custom HTML

Check out the demo

Source code download

    $( document ).ready(function() {

$('.popup-window').popover({
    html: true,
    title : '×',
    trigger: 'manual',
    content: function () {
        return $(this).next('.popup-content').html();
    }
}).click(function(e) {
    $(this).popover('toggle');
    $('.popup-window').not(this).popover('hide');

    e.stopPropagation();
});

$('body').on('click', function (e) {
    $('.popup-window').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });

}); 

and html

        


        
        

            
        
        

            

                Share:
                

                    
                        
                    
                    
                        
                    
                
            
        

        
        

            
        
        

            

                Respond To Review:
                

                    Great song BRO!
                
                

                    Post Response
                
            
        



    

and css

   .actions .popover-content {
    padding: 20px 40px;
}
.actions .popup-window,
.action-link {
    display: inline-block;
    margin-right: 5px;
    line-height: 20px;
    border-radius: 5px;
    padding: 7px;
    width: 34px;
    height: 34px;
    background-color: #2fa0e5;
    color: #fff;
    cursor: pointer;
}
.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus {
    opacity: 0.85;
}
.action-link:last-child,
.actions .popup-window:last-child {
    margin-right: 0;
}
.btn-popup.fa {
    font-size: 20px;
    cursor: pointer;
}
.actions .popover-title {
    background-color: transparent;
    border-color: transparent;
    float: right;
}
.actions .popover-content .form-group:first-child {
    margin-top: 10px;
}
.actions .popover-content .well {
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}
.actions .popover-content .well a {
    margin: 0 10px 0 0;
}