STooltip <s-tooltip>

Un court libellé qui apparaît lorsqu'un autre élément est survolé ou reçoit le focus. STooltip est le wrapper Vue 3 typé du web component <s-tooltip> de Shopify Polaris.

import { STooltip } from 'polaris-vue-elements'

Bonnes pratiques

• Utilisez les infobulles pour des détails supplémentaires et non essentiels. Elles conviennent aux informations qui aident à comprendre sans être indispensables. Ne cachez jamais d'erreurs, d'informations essentielles ou d'instructions obligatoires dans une infobulle.
• Associez-les aux boutons à icône seule. Un bouton à icône a besoin d'une infobulle pour expliquer ce qu'il fait ; indiquez l'action et, s'il existe, son raccourci clavier.
• Gardez un texte bref. Une courte expression ou phrase est idéale. Si le contenu s'allonge, il mérite probablement une place plus visible dans l'interface.
• Voyez dans la multiplication des infobulles un signal d'alerte. Si l'interface a besoin de nombreuses infobulles pour être compréhensible, améliorez plutôt les libellés, la mise en page ou l'architecture de l'information.
• Pensez aux appareils tactiles. Les infobulles ne fonctionnent que sur ordinateur et n'apparaissent pas sur les écrans tactiles : affichez par défaut les informations importantes sur mobile.

<SButton icon="delete" accessibilityLabel="Delete product" interestFor="delete-tip" />
<STooltip id="delete-tip">Delete product</STooltip>

Consultez les bonnes pratiques de Shopify pour <s-tooltip> (en anglais) pour l'ensemble des recommandations.

Exemple

Survolez le bouton ci-dessous ou donnez-lui le focus pour afficher le tooltip : il s'active via interestFor, et non par un clic.

Hover or focus meExtra context shown on hover or focus.

<script setup>
import { SButton, SText, STooltip } from 'polaris-vue-elements'
</script>

<template>
  <!-- interestFor activates the target on hover/focus, unlike commandFor which
       requires a click/activation. -->
  <SButton interestFor="example-tooltip">Hover or focus me</SButton>

  <STooltip id="example-tooltip">
    <SText>Extra context shown on hover or focus.</SText>
  </STooltip>
</template>

Props

Prop	Type	Description
id	string	Un identifiant unique pour l'élément.

Slots

Slot	Description
default	Le texte ou les éléments informatifs affichés dans la surcouche de l'infobulle, qui apportent un contexte ou des explications utiles lorsque les utilisateurs interagissent avec l'élément associé. N'accepte que du texte, des composants paragraph et du textContent brut.