Infobulle en deux parties
Deux moitiés colorées arrivent de chaque côté et se rejoignent au centre pour former l'infobulle sous le bouton.
Réglages
Code
<button class="uv-ts">Copier<span><i></i>Copié dans le presse-papiers</span></button>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
Où l’utiliser
Elle convient aux boutons de copie qui ont un peu de caractère, comme le code promo dans la bannière d'une boutique en ligne ou le bon de réduction en bas d'une newsletter. Les deux couleurs viennent de votre palette : l'infobulle porte votre identité au lieu de l'éternelle étiquette noire. Ce tooltip CSS s'ouvre sous le bouton.
Choisissez deux couleurs sur lesquelles le texte reste lisible, puisque le message se pose dessus. Si vos teintes sont très claires, foncez-les un peu. Et gardez un message court : c'est avec deux ou trois mots que l'effet rend le mieux.