Appel API php

**aymericc** · 14/04/2023, 23h21

Bonsoir, je me permet de poster ce message car je suis débutant ( même plus que débutant ) dans le php et les API mais j'apprend au fur et à mesure

. J'essai d'utliser l'API public d'un jeu pour afficher les badges dispo dans ce jeu pour ensuite les afficher sur mon site wordpress. Pour le moment j'ai reussi à afficher les badges mais j'aimerais qu'au passage de la souris, le nom et la description s'affiche, j'ai beau fouiller partout pour trouver des tutos, mais malheureusement je ne trouve pas

.

Voici le code php d'appel de l'api que j'ai fais :
------------------------------------
<?php

$data = wpgetapi_endpoint( ' Badges ' , ' badges ' , array('debug' => false) );

foreach ($data['result'] as $result) {
echo '<img src="' . $result['image'] . '">';
}

?>

-------------------------------------

J'aimerais que les badges s'affiche comme sur le screen : https://zupimages.net/up/23/15/vkd0.png

Voici l'adresse de l'api Doc : https://puhekupla.com/api/index.html

Les terminaisons disponible que je voudrais afficher au passage de la souris sont : "name" et "description" .

Si quelqu'un peut m'aiguiller ce serait vraiment le top

Merci d'avance, cordialement.

**mathieu** · 14/04/2023, 23h51

est ce que vous obtenez déjà toutes les données à partir de l'API ?
vous pouvez utilisez la fonction suivante pour afficher le contenu d'une variable php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function aff($var)
{
	echo "<pre>";
	echo htmlspecialchars(var_export($var, TRUE));
	echo "</pre>";
}

**aymericc** · 14/04/2023, 23h58

Oui j'arrive a avoir toutes les infos mais c'est surtout pour l'aspect visuel, tout ce met à la suite... ca fait pas propre du tout :s
Comme je le disais, je suis pas douer en codage ( je suis des tutos ect )... ou dois je placer la fonction ?

**mathieu** · 15/04/2023, 00h23

si vous récupérez déjà les données alors la question ne concerne plus php mais la présentation qui se fait en html et css.

dans le code html, vous pouvez utiliser un attribut "title" qui permet d'afficher un message au survol de la souris :
https://developer.mozilla.org/fr/doc...usieurs_lignes

si vous avez besoin de plus d'aide pour cette présentation, vous devrez créer une nouvelle discussion dans un de ces forums :
https://www.developpez.net/forums/f4...mise-page-css/
https://www.developpez.net/forums/f3...alidation-w3c/

**aymericc** · 19/04/2023, 12h14

Du coup j'ai suivi les liens que tu ma donner pour le tooltip mais la je seche...

Voici le code en question qui affiche bien tout ce que je souhaites sauf le tooltip :s :
Il y a deja un Tooltip de base avec ce code mais il est pas design du tout :s

<br>
<!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: 46px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<?php

$data = wpgetapi_endpoint( 'Badges', 'badges', array('debug' => false) );

foreach ($data['result'] as $result) {
echo '<img src="' . $result['image'] . '" title="' . $result['name'] . '">';
echo "   ";
}

?>
</body>
</html>

J'aimerais que le titre du badges ( image de l'api ) s'affiche comme ca :

Nom : tooltip.png
Affichages : 233
Taille : 5,1 Ko