Bootstrap Modal onmouseover

Question

So I am working on my personal webpage, and this is my first development with Bootstrap. I am using php, html, css, and JS as my dev stack. The error I am having is trying to create an element that: 1. If a php test passes, create a div, and in the JS, attach an onemouseover event (I know how to do this piece) 2. I want a bootstrap modal to open and transition onmouseoever, and close, onmouseleave. This is the code so far, the createModal function is empty, as using this.innerHTML = blahblahblah didn't work.

        <?php 
        if(!isset($_GET["nfc"])){
            $nfc = false;
        } else {
            $nfc = filter_var($_GET["nfc"], FILTER_VALIDATE_BOOLEAN);
        }
    ?>

<?php 
        if ($nfc == true) { ?>
            <a href="#"
            id="nfc"
            data-toggle="modal"
            data-target="#basicModal"><i class="fa fa-chevron-circle-down fa-5x"></i></a>
            <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            <h3>Modal Body</h3>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        <?php } else { ?>
            <i class="fa fa-chevron-circle-down fa-5x"></i>
        <?php } ?>
    </div>

JS: var element = document.getElementById("nfc"); if (typeof(element) != 'undefined' && element != null) { element.onmouseover = createModal; }

Answer 1

You can show hide your modal by using the following jquery code

$(document).ready(function(e){
  $("body").find("#nfc").hover(function() {
      $("#basicModal").modal('show');
  }, function(){
      $("#basicModal").modal('hide');                            
  });
});