Tooltip

Les infobulles fournissent un texte explicatif ou des informations contextuelles supplémentaires sur un élément spécifique pour aider l'utilisateur à comprendre sa fonction.

Utilisation

Importez le composant selon vos besoins :

import 'mdui/components/tooltip.js';

Importez le type TypeScript correspondant :

import type { Tooltip } from 'mdui/components/tooltip.js';

Exemple d'utilisation :

Button

<mdui-tooltip content="Infobulle simple">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Exemples

Infobulle simple

Le style par défaut est une infobulle simple. Utilisez l'attribut content pour définir le contenu.

Button

<mdui-tooltip content="Infobulle simple">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Source

Vous pouvez également utiliser le slot content.

Button

titre

contenu

<mdui-tooltip>
  <mdui-button>Button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">titre</div>
    <div>contenu</div>
  </div>
</mdui-tooltip>

Source

Infobulle riche

Définissez variant="rich" pour créer une infobulle riche. Utilisez les attributs headline et content pour définir le titre et le contenu.

Button

<mdui-tooltip
  variant="rich"
  headline="Infobulle riche"
  content="Les infobulles riches attirent l'attention sur un élément spécifique qui le mérite. Elles prennent en charge plusieurs lignes de texte informatif."
>
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Source

Utilisez les slots headline, content et action.

Button

Infobulle riche

Les infobulles riches attirent l'attention sur un élément spécifique qui le mérite. Elles prennent en charge plusieurs lignes de texte informatif.

Action

<mdui-tooltip variant="rich">
  <mdui-button>Button</mdui-button>
  <div slot="headline">Infobulle riche</div>
  <div slot="content">Les infobulles riches attirent l'attention sur un élément spécifique qui le mérite. Elles prennent en charge plusieurs lignes de texte informatif.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

Source

Position

Utilisez l'attribut placement pour définir la position.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Source

Déclenchement

Utilisez l'attribut trigger pour définir le mode de déclenchement.

Button

<mdui-tooltip trigger="click" content="Infobulle">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Source

Délai d'ouverture/fermeture

Lorsque trigger="hover", utilisez open-delay et close-delay pour définir les délais en millisecondes.

Button

<mdui-tooltip open-delay="1000" close-delay="1000" content="Infobulle">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Source

État désactivé

Ajoutez l'attribut disabled pour désactiver l'infobulle.

Button

<mdui-tooltip disabled content="Infobulle">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Forme de l'infobulle. Par défaut `plain`. Les valeurs possibles incluent : `plain` : Texte brut, adapté aux simples lignes de texte `rich` : Texte enrichi, peut contenir un titre, un corps et des boutons d'action
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Position de l'infobulle. Par défaut `auto`. Les valeurs possibles incluent : `auto` : Position déterminée automatiquement. Lorsque `variant="plain"`, privilégie `top` ; lorsque `variant="rich"`, privilégie `bottom-right`. `top-left` : En haut à gauche `top-start` : En haut, aligné à gauche `top` : En haut, centré `top-end` : En haut, aligné à droite `top-right` : En haut à droite `bottom-left` : En bas à gauche `bottom-start` : En bas, aligné à gauche `bottom` : En bas, centré `bottom-end` : En bas, aligné à droite `bottom-right` : En bas à droite `left-start` : À gauche, aligné en haut `left` : À gauche, centré `left-end` : À gauche, aligné en bas `right-start` : À droite, aligné en haut `right` : À droite, centré `right-end` : À droite, aligné en bas
`open-delay`	`openDelay`	`number`	`150`
Délai d'affichage lors du déclenchement par survol de la souris, en millisecondes.
`close-delay`	`closeDelay`	`number`	`150`
Délai de masquage lors du déclenchement par survol de la souris, en millisecondes.
`headline`	`headline`	`string`	-
Titre de l'infobulle. Utilisable uniquement lorsque `variant="rich"`. Peut également être défini via `slot="headline"`.
`content`	`content`	`string`	-
Contenu de l'infobulle. Peut également être défini via `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Mode de déclenchement. Prend en charge plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent : `click` : Se déclenche au clic `hover` : Se déclenche au survol de la souris `focus` : Se déclenche au focus `manual` : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
`disabled`	`disabled`	`boolean`	`false`
Si l'infobulle est désactivée
`open`	`open`	`boolean`	`false`
Si l'infobulle est affichée

Événements

Nom
`open`
Se déclenche lorsque l'infobulle commence à s'afficher. Vous pouvez empêcher l'ouverture de l'infobulle en appelant `event.preventDefault()`.
`opened`
Se déclenche lorsque l'animation d'affichage de l'infobulle est terminée.
`close`
Se déclenche lorsque l'infobulle commence à se masquer. Vous pouvez empêcher la fermeture de l'infobulle en appelant `event.preventDefault()`.
`closed`
Se déclenche lorsque l'animation de masquage de l'infobulle est terminée.

Slots

Nom
Défaut
Élément cible déclenchant l'infobulle. Seul le premier élément du slot `default` est pris en compte comme élément cible.
`headline`
Titre de l'infobulle, ce slot ne s'applique que lorsque `variant="rich"`.
`content`
Contenu de l'infobulle, peut contenir du HTML. Si seul du texte brut est nécessaire, l'attribut `content` peut être utilisé à la place.
`action`
Bouton(s) en bas de l'infobulle, ce slot ne s'applique que lorsque `variant="rich"`.

CSS Parts

Nom
`popup`
Conteneur de l'infobulle
`headline`
Titre
`content`
Corps
`action`
Bouton(s) d'action

Propriétés CSS personnalisées

Nom
`--shape-corner-plain`
Lorsque `variant="plain"`, taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--shape-corner-rich`
Lorsque `variant="rich"`, taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--z-index`
Valeur CSS `z-index` du composant.

Chapitre précédent

TextField

Chapitre suivant

TopAppBar