Retours et chargement

Infobulle

nouveauClasses hb-tipVuetify 2 v-tooltip bottom (habillé)Vuetify 3 v-tooltip location="bottom"

Quand l'utiliser

Pour nommer un bouton à icône seule, donner le nom complet derrière une puce tronquée ou un « +2 », expliquer un chiffre. Jamais pour une information nécessaire à l'action : elle serait invisible au toucher.

+2 survoler

Code

<div class="hb-row">
  <button class="hb-btn hb-btn-icon hb-tip" data-tip="Dupliquer la tâche" aria-label="Dupliquer la tâche"><i class="material-icons">content_copy</i></button>
  <span class="hb-chip hb-chip-more hb-tip" tabindex="0" data-tip="D. Martin, B. Simon">+2</span>
  <span class="hb-tip hb-badge hb-badge-slate" tabindex="0" data-tip="Survol ou focus clavier">survoler</span>
</div>

Règles

Une ligne courte, sans ponctuation finale, pas d'interaction dedans.
Dans une application Vuetify, v-tooltip (positionnement dans la fenêtre, délai) ; hb-tip sert au site et aux WebView sans Vuetify, et reste dans le flux (il peut être rogné par un conteneur overflow: hidden).
Le texte de l'infobulle d'un bouton est aussi son aria-label.