Envío gratis a partir de 40 €Pedidos antes de las 18:00 salen hoy. Devolución gratis en 30 días.
HTML + CSSInfo-bulles
Infobulle qui se déplie en 3D
L'infobulle s'ouvre comme un papier plié : d'abord l'en-tête, puis le corps, en 3D.
Réglages
16px
1x
Code
<span class="uv-tuf"><button type="button" aria-describedby="uv-tuf-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg>Livraison</button><span class="tt" role="tooltip" id="uv-tuf-t"><span class="p1">Livraison offerte dès 40 €</span><span class="p2">Commandes avant 18 h expédiées aujourd’hui. Retour gratuit sous 30 jours.</span></span></span>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une alternative ludique aux infobulles en fondu pour les infos de livraison, les promotions ou les notes produit. La bulle est faite de deux panneaux reliés par une charnière : au survol ou au focus, l'en-tête pivote en place puis, un instant après, le corps se déplie vers le bas, avec une ombre qui s'éclaircit à l'ouverture, comme une feuille qu'on déplie devant toi.
À la fermeture, la séquence s'inverse. L'infobulle est reliée au bouton par aria-describedby et le titre se modifie avec le champ de texte. Le corps reste dans le HTML.