Questions Properties Popover Bootstrap

Question

I’m creating a Popover with bootstrap, it appears as soon as I pass the mouse in the html tag, but when I try to click on the Popover it goes away, it has some property that when I hover over it leave it open to click on a link in Popover for example?

 var criarPopoverCompra = function (cupomFiscal) {
            $('#cupom' + cupomFiscal).popover({
                html: true,
                placement: "bottom",
                trigger: "hover",
                title: '',
                content: 'Clique no registro para voltar'
            });
        }

Answer 1

Right, that’s because you’re using trigger as hover.
Take a look at the Popover documentation https://getbootstrap.com/docs/4.0/components/popovers

I did a very simple workaround here, if you want to follow it, from an improved code, abstraction to a function and etc.

$(() => {
  const popover = $('#myPopover');
  
  popover.popover({
    html: true,
    placement: "bottom",
    trigger: "manual",
    title: '',
    content: 'Clique <a href="#" data-popover="myPopover" class="close-popover">aqui</a> para voltar'
  });
  
  popover.on('mouseover', () => popover.popover('show') );
  popover.on('shown.bs.popover', (event) => {
    const id = popover.attr('id');
    $(`[data-popover=${id}].close-popover`).on('click', () => {
     popover.popover('hide'); 
    });
  });
  
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container">
  <button 
    id="myPopover" 
    type="button" 
    class="btn btn-secondary">
    Popover
  </button>      
</div>