Używam wyskakującego okienka Bootstrap, aby utworzyć wizytówkę pokazującą informacje o użytkowniku i uruchamiam ją po najechaniu kursorem myszy na przycisk. Chcę utrzymać ten popover przy życiu, gdy sam popover jest najeżdżany, ale znika, gdy tylko użytkownik przestanie najeżdżać na przycisk. W jaki sposób mogę to zrobić?
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box">Popover</div>';
}
});
$(document).on('mouseover', '#example', function(){
$('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
$('#example').popover('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>