Tooltip

Les info-bulles sont utilisées pour exposer des informations supplémentaires qui ne sont pas facilement disponibles dans l'interface utilisateur. Vous pouvez les utiliser pour expliquer ce qu'est un élément d'interface utilisateur, expliquer le but d'une action ou fournir une définition d'un mot ou d'une phrase.

Usage

import { Tooltip } from 'nr1'

Exemples

Basique

<Tooltip text="Search across all your accounts">
  <Button>Search</Button>
</Tooltip>

Avec placementType

<Tooltip
  text="Explore your metrics, events and logs"
  placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
>
  <Button>Query your data</Button>
</Tooltip>

Avec un lien d'informations supplémentaires

function render() {
  const additionalInfoLink = {
    label: 'See the docs',
    to: 'https://docs.newrelic.com',
  };


  return (
    <p>
      Welcome to
      <Tooltip
        text="Go to docs for more information"
        placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
        additionalInfoLink={additionalInfoLink}
      >
        New Relic
      </Tooltip>
    </p>
  );
}

Accessoires

additionalInfoLink

forme

Les informations présentées dans le texte peuvent être complétées/étendues par un lien vers la documentation. Ce lien ne doit être utilisé que pour fournir des informations contextuelles.

forme

label

OBLIGATOIRE

chaîne

onClick

fonction

Le rappel est déclenché à chaque fois que l'utilisateur clique sur le bouton.

function (event: React.MouseEvent 
)

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien.

forme

pathname

OBLIGATOIRE

chaîne

search

chaîne

hash

chaîne

children

OBLIGATOIRE

nœud

Élément auquel attacher l'info-bulle, survoler ou se concentrer sur cet élément affichera l'info-bulle. Nous vous recommandons de transmettre un élément focalisable afin que les lecteurs d'écran puissent annoncer le contenu de l'info-bulle.

placementType

énum.

Les info-bulles apparaissent à côté de l’élément, de l’action, du mot ou de la phrase qu’elles expliquent. L'affichage par défaut se fait depuis le haut, mais vous pouvez également choisir de l'afficher depuis la droite, le bas ou la gauche.

<One ofInfo-bulle.PLACEMENT_TYPE.BOTTOM, Info-bulle.PLACEMENT_TYPE.LEFT, Info-bulle.PLACEMENT_TYPE.RIGHT, Info-bulle.PLACEMENT_TYPE.TOP,
>

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

text

OBLIGATOIRE

chaîne

Les info-bulles doivent répondre à une question pour l'utilisateur. Les conseils doivent être clairs, précis et utiles. Fournissez juste assez d’informations pour répondre aux questions sans surcharger l’utilisateur.

Gardez la copie facile à lire et claire. Pour une copie plus longue, utilisez des phrases complètes, des verbes actifs et de la ponctuation.
Donnez suffisamment d’informations pour éviter les malentendus. Par exemple, si un bouton semble pouvoir ajouter plusieurs choses, utilisez l’info-bulle pour clarifier ce qu’il ajoute réellement.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec placementType

Avec un lien d'informations supplémentaires

Accessoires

forme

forme

OBLIGATOIRE

chaîne

fonction

forme|chaîne

forme

OBLIGATOIRE

chaîne

chaîne

chaîne

OBLIGATOIRE

nœud

énum.

chaîne

OBLIGATOIRE

chaîne

Usage