<style>
img{
  max-width:30%;
  margin: 2px;
}

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #161616;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 12px Arial;
  z-index: 10;
}
</style>
<?php
//Dit kan naar config file, afhankelijk van hoe Alex de andere informatie oproept
$servername = "localhost";
$username = "ddgweb";
$password = "X0X7KqmFx44iBjR56cu9ClPm";
$dbname = "ddgweb";

$conn = mysqli_connect($servername, $username, $password, $dbname);
$sql = "SELECT id, username FROM staff_aanwezig";
$result = mysqli_query($conn, $sql);

while($row = mysqli_fetch_assoc($result)) {
    ?>
        <img src="https://minotar.net/avatar/<?=$row["username"]?>/32" alt="<?=$row["username"]?>">
    <?php
}
mysqli_close($conn);
?>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    // use ALT tag as tooltip
  $('img').hover(function () {
        // Hover over code
         var title = $(this).attr('alt');
         $(this).data('tipText', title);
         if(title == ''){
           /* no alt tag */ }
         else{
            $('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
         }
     }, function () {
         // Hover out code
         $(this).attr('alt', $(this).data('tipText'));
         $('.tooltip').remove();
     }).mousemove(function (e) {
         var mousex = e.pageX + 20;
         //Get X coordinates
         var mousey = e.pageY + 10;
         //Get Y coordinates
         $('.tooltip').css({
             top: mousey,
             left: mousex
         })
     });
</script>