Как очистить данные, отображаемые в mouseenter с помощью onmouseout

Question

Когда пользователь наводится на изображение, появляется информационное окно об этом изображении, информация, которую они меняют внутри коробки, когда я перемещаюсь по другому изображению, но когда я не вижу изображений, информационный ящик остается. Я не могу закрыть информационное окно (то есть всплывающие подсказки).

JS:

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'; 
    } 
}); 

Как я могу получить информацию окно исчезнуть курсора мыши? Я пробовал несколько тестов, но ящик не появляется с ними, последний, который я пробовал, находится в коде выше.

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

Я только начинаю с javascript, jquery и т. Д. В прошлом году.

Благодарим вас заранее!

Это php.

<div class="thumbnails"> 
<?php 
$query = mysqli_query($connection, "select * from portfolio"); 
    print "<ul>"; 
    while ($row = mysqli_fetch_assoc($query)) {print "<li><a href=\"javascript:return(0)\" data-myval=".$row['folio_id'] . "><img onClick=preview.src=" . $row['image'] . "name=" . $row['folio_id'] . "src={$row['image']}></a></td></li>"; 
    } 
    print "</ul>"; 
    ?> 
</div> 

<!--Folio Information--> 
<div id="fillFolio">Project Information</div> 

Answer 1

Я не уверен, но попробуйте использовать:

$('a').onmouseleave(function() { 
    $("#fillFolio").empty(); 
} 

Надеется, что это помогает.

Answer 2

$("a").hover(function(){ 
     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); 
      } 
     }); 
    }, function(){ 
//im not sure u want to hide or want to just clear your question not clear 
    $("#fillFolio").empty(); 
    $("#fillFolio").hide(); 
}); 

Answer 3

Почему бы не использовать JQuery парения = (MouseEnter + MouseLeave)

<script type="text/javascript"> 
    var id; 
    $(document).ready(function() { 
    $('a').hover(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); 
      } 
     }); 
     ,function() { 
      id = $(this).empty(); 
    }); 
</script>