How do I clear data shown on mouseenter with onmouseout

When the user hovers over an image an information box comes up about that image, the information them changes inside the box as I move over another image but when I am over no images the information box stays. I can't close the information box (i.e. tooltips).

<script type="text/javascript">
   var id;
   $(document).ready(function () {
    $('a').mouseenter(function () {
        //var id = $(this).parent().attr('myval');
        id = $(this).data('myval');
        $.ajax({//create an ajax request to foliobase.php
            type: "GET",
            //link to the foliobase.php file "?subj" here is the connector
            url: "foliobase.php?subj=" + id,
            dataType: "html",
            success: function (response) {
                $("#fillFolio").html(response);
            }
        });
    });
    $('a').onmouseleave(function () {
        id  = $(this).data.display = 'none';
    }
  });
</script>

How can I get the information box to disappear on mouse out? I have tried multiple tests but the box doesn't even appear with them, the last one I tried is in the code above.

    $('a').onmouseleave(function () {
        id  = $(this).data.display = 'none';
    }

I am only starting out with javascript, jquery etc. in the last year.

Thank you in advance!!