Questions Popover Bootstrap

Navigation
0

I'm creating a popup with bootstrap, it pops up as soon as I hover the html tag, but when I try to click on the popover it pops up, it has some property that when I mouse over it let it open to get click in a link in the popover for example? 

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

1 answer

1

Right, this is because you are using trigger as hover . Take a look at the popover documentation link

I made a very simple workaround here, if you want to follow it, from an improved code, abstract to a function and so on. 

$(() => {
  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><scriptsrc="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><divclass="container">
  <button 
    id="myPopover" 
    type="button" 
    class="btn btn-secondary">
    Popover
  </button>      
</div>
    
07.12.2017 / 17:44
Problem with alignment with responsiveness How to use base64 image in Angular 2?