Sujet Précédent Sujet Suivant

Infos bulle tooltip

Fermé
Aymericc - Modifié le 25 avril 2023 à 08:28
jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 - 25 avril 2023 à 11:56

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>

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
25 avril 2023 à 09:40

Bonjour

Et bien, quel est le souci ?

Il te suffit d'utiliser le code qui t'est fourni dans le lien que tu nous montres....
0
Réponse 2 / 2
Aymericc
25 avril 2023 à 09:51

Le soucis c’est que je n’ai de pas ou le placer et il doit y avoir des lignes a remplacé pour dire que la [description] doit se placer au dessus de [image] ? ☺️
je suis pas bon en codage, c’est bien dommage …

merci de ta réponse  ???? 
0
jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
25 avril 2023 à 11:56

Si tu regardes bien dans la page, tu verras un bouton "essayez le vous même" ( try it yourself)

En cliquant dessus tu arrives sur une page contenant un exemple de code qu'il te suffira de reproduire sur ton site pour que ça fonctionne...

0

Discussions similaires

Infobulle survol souris
olivierngoc -
Vaucluse -

4 réponses
Whatsapp pouce
Sousoune -
Sojiro88 -

15 réponses
Couleur des Bulles ds Whatsapp
Tianis -
TIANIS123 -

3 réponses
Bulle d'air dans l'ecran de mon téléphone
Carrelage_ -
Carrelage_ -

4 réponses
c'est quoi l'icone systray
kabrice01 -
Par Natasha -

5 réponses