Infos bulle tooltip
Aymericc
-
jordane45 Messages postés 40050 Statut Modérateur -
jordane45 Messages postés 40050 Statut Modérateur -
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>
A voir également:
- Infos bulle tooltip
- Video bulle whatsapp - Accueil - Messagerie instantanée
- Whatsapp couleur bulle - Accueil - Messagerie instantanée
- Bulle sur contact sms - Forum Xiaomi
- Bulle d'air ecran tactile ✓ - Forum Téléphones & tablettes Android
- Info infos bouyguestelecom fr - Forum Bouygues Télécom
2 réponses
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....
