title: Bootstrap Modal onmouseover
body: <p>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.</p>
  
  <pre><code>        &lt;?php 
          if(!isset($_GET["nfc"])){
              $nfc = false;
          } else {
              $nfc = filter_var($_GET["nfc"], FILTER_VALIDATE_BOOLEAN);
          }
      ?&gt;
  
  &lt;?php 
          if ($nfc == true) { ?&gt;
              &lt;a href="#"
              id="nfc"
              data-toggle="modal"
              data-target="#basicModal"&gt;&lt;i class="fa fa-chevron-circle-down fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"&gt;
                  &lt;div class="modal-dialog"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;amp;times;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;h3&gt;Modal Body&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;?php } else { ?&gt;
              &lt;i class="fa fa-chevron-circle-down fa-5x"&gt;&lt;/i&gt;
          &lt;?php } ?&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS:
      var element = document.getElementById("nfc");
          if (typeof(element) != 'undefined' &amp;&amp; element != null) {
              element.onmouseover = createModal;
          }</p>