如何使用焦点引导popover？

Question

I have a popover like this. And i need it to work as focus, the only thing when i click on quantity field it disappears, because the link is not focused.

Here is the code:

var popover = $("[data-toggle=popover]").popover({
         trigger : 'focus',  
         placement : 'right',
         container: 'body',
         html: 'true'
          }).on('show.bs.popover', function() { 
         product_id = $(this).attr('data-product-id');
         popover = $(this);
         $.ajax({
             url : '/product/short_description/' + product_id, 
             success : function(html) {
                 popover_id = popover.attr('aria-describedby');
                 $('#' + popover_id + ' .popover-content').html(html);
             }
          });
        });

Answer 1

Try this:

var popover = $("[data-toggle=popover]").popover({
         trigger: 'manual',  
         placement : 'right',
         container: 'body',
         html: 'true'
          }).on('show.bs.popover', function() { 
         product_id = $(this).attr('data-product-id');
         popover = $(this);
         $.ajax({
             url : '/product/short_description/' + product_id, 
             success : function(html) {
                 popover_id = popover.attr('aria-describedby');
                 $('#' + popover_id + ' .popover-content').html(html);
             }
          });
        }).click(function(e){ 
$(this).popover('show');
e.preventDefault(); 
}).addClass('mypopover');

Then :

$('html').click(function() {
$(".mypopover").hide();
});

$('.mypopover').click(function(event){
    event.stopPropagation();
});