Infos bulle tooltip

Bonsoir, je voudrais créer un Tooltip sur le code php suivant qui appel une api pour mon site web. Cette api appel des badges présent dans le jeu [image] ainsi que la [description]. Tout marche bien mais niveau esthétique c est léger et j’aimerais que quand on survol un badges, la description s’affiche dans une bulle noir comme sur ce site : https://www.w3schools.com/css/css_tooltip.asp avec le placement du Tooltip « TOP ». Voici le code en question :

<?php
  $url = 'https://api.habboemotion.com/public/badges/new';
  $result = json_decode(file_get_contents($url));
  $data = $result->data;
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Latest Habbo Badges</title>
    <style type="text/css">
      #items {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      
        #items .item {
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    </style>
  </head>
  <body>
    <h2>Badges (<?php echo $data->total; ?>)</h2>
    <div id="items">
      <?php 
        foreach($data->badges AS $badge) {
          if(!$badge->exist) {
            $badge->image = 'https://files.habboemotion.com/resources/images/icons/toolbar_06.gif';
          }
      ?>
       <div class="item">
         <img src="<?php echo $badge->image; ?>" title="<?php echo $badge->code; ?> - <?php echo $badge->name; ?>" alt="" />
       </div> 
      <?php 
        }
      ?>
    </div>
  </body>
</html>