Tooltip Infos Bulle

Créateur

Sujet
avril 25, 2023 à 7:55 am #25728

Aymericfb
Participant

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.aspavec 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>

Si quelqu’un peut m’aider ce serait super cool 👍
Créateur

Sujet

Vous lisez 0 fil de discussion

Auteur

Réponses
- avril 25, 2023 à 9:48 am #25729
  
  Culte du code
  Maître des clés
  Bonjour,
  
  Pour une réponse plus rapide n’hésite pas à poster directement sur notre Discord :
  - https://discord.com/invite/VXyWvdK
  Créateur, auteur et éditeur pour le Culte du code.
  Développeur web full-stack indépendant.
Auteur

Réponses