Infobulle qui glisse le long de la barre
Une seule infobulle voyage de bouton en bouton et adapte sa largeur à chaque libellé.
Réglages
Code
<div class="uv-ttg" role="toolbar" aria-label="Barre d’édition"><button type="button" aria-label="Gras"><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="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button><button type="button" aria-label="Italique"><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="M10 5h8M6 19h8M14 5l-4 14"/></svg></button><button type="button" aria-label="Lien"><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="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button><button type="button" aria-label="Insérer une image"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="M20.5 16l-5-5-8.5 8.5"/></svg></button><button type="button" aria-label="Commenter"><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="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></button><span class="tt" aria-hidden="true"><span class="in"></span></span></div>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
Les barres d'icônes des éditeurs ont besoin de libellés, mais une infobulle séparée sur chaque bouton donne des à-coups. Cette barre utilise une seule infobulle qui glisse vers le bouton survolé ou focalisé et ajuste sa largeur au libellé, le parcours de la rangée devient donc un mouvement continu. Une finition soignée pour les éditeurs de texte, les outils de design et les lecteurs.
Les libellés viennent de l'aria-label de chaque bouton, une seule source pour l'accessibilité et l'infobulle. Elle se masque quand le pointeur ou le focus quitte la barre, et son mouvement reste fluide même en passant vite d'un bouton à l'autre.