Modal flashing on mouseleave and mouseenter

Question

I have to do an action when I hover the mouse over the image it appears in a modal (bootstrap) with the image in a larger size.

The problem is that it keeps blinking non-stop, giving Hide and show when I’m with my mouse on top.

Someone would know a way to make it work... I’ve tried so many ways and nothing

  <img  onmouseleave="$('#myModal<?php echo $v_disco_virtual[$i]['disco_virtual_id']?>').modal('hide');" onmouseenter=" $('#myModal<?php echo $v_disco_virtual[$i]['disco_virtual_id']?>').modal().show()" id="teste"   src="<?php echo $v_disco_virtual[$i]['disco_virtual_upload']; ?>" alt="image_produto.png">

Answer 1

Can insert the code, just put an image in the modal that ta solved.

$(document).ready(function(){
    $( "#test" ).hover(function() {
           $('.modal').modal({
        show: true
    });
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button id="test">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>

    </div>
  </div>
</div>