Bootstrap Popover() - useful example

Bootstrap popover() example below has a few useful features:

1. Popover initiates via mouse-hover over <span class="paymentNum">
2. trigger: 'manual' is used with onmouseenter and onmouseleave event to mimic trigger by hover
3. User can move the mouse into the popover. Popover dissapears when mouse is completely out of the popover-initiating span tag or the shown popover
4. Once popover is shown, it stays visible even when mouse moves between the popover-initiating span tag and the popover itself (This would not work if trigger: 'hover' was used. It was possible by using trigger: 'manual' and onmouseenter and onmouseover events).
5. Popover title is dynamically loaded.
6. Popover content is dynamically loaded via ajax. Loading... is shown if there is a delay. When ajax get is done, its response dynamically replaces popover content.

<span class="paymentNum">@payment.PaymentNum</span>
<input type="hidden" class="payment-id" value="@payment.PaymentID" />
                       
.....

<script type="text/javascript">
        $(function () {

            $('span.paymentNum').popover({
                trigger: 'manual',
                placement: 'right',                
                title: function(){
                    return "Payment " + $(this).text();
                },
                html: true,
                animation: false,
                container: 'body',  
                template: '<div class="popover" role="tooltip" style="min-width: 400px; background-color: #fff; ">' +
                            '<div class="arrow"></div>' +
                            '<h3 class="popover-title" style="background-color: #dedede"></h3>' +
                            '<div class="popover-content" style="height: 400px; overflow-y: auto; font-size: 0.9em;"></div>' +
                            '</div>',
                content: function () {
                    var div_id = "temp_" + $.now();
                    var payment_id = $(this).parent().find('.payment-id').val();
                    
                    $.ajax({
                        type: 'GET',
                        url: GL.site_root_path + '/Payment/_QuickSummary/' + payment_id,
                        cache: false,
                        beforeSend: function () { },
                        complete: function () { }
                    }).done(function (d) {
                        $('#' + div_id).html(d); // Genius!!!
                    });
                    return '<div id="' + div_id + '"><div style="margin-top: 180px; text-align: center; font-size: 1.2em;">Loading ...<i class="fa fa-refresh fa-spin"></i></div></div>';                    
                }
            }).on('mouseenter', function () {
                var _this = this;
                $(this).popover("show");
                $('.popover').on('mouseleave', function () {
                    $(_this).popover("hide");
                });
            }).on('mouseleave', function () {
                var _this = this;
                setTimeout(function () {
                    if (!$('.popover:hover').length) {
                        $(_this).popover("hide");
                    }
                }, 50);
            });
        });

    </script>