Tooltip

I tooltip mostrano informazioni supplementari per un elemento specifico e aiutano a spiegare cosa fa.

Utilizzo

Importa il componente:

import 'mdui/components/tooltip.js';

Importa il tipo TypeScript:

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

Esempio:

pulsante

<mdui-tooltip content="Tooltip semplice">
  <mdui-button>pulsante</mdui-button>
</mdui-tooltip>

Esempi

Tooltip di Testo Semplice

Per impostazione predefinita, il tooltip visualizza testo semplice. L'attributo content imposta il contenuto del tooltip.

pulsante

<mdui-tooltip content="Tooltip semplice">
  <mdui-button>pulsante</mdui-button>
</mdui-tooltip>

Sorgente

Oppure, usa lo slot content.

pulsante

titolo

contenuto

<mdui-tooltip>
  <mdui-button>pulsante</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">titolo</div>
    <div>contenuto</div>
  </div>
</mdui-tooltip>

Sorgente

Tooltip Ricco

Per un tooltip ricco, imposta l'attributo variant su rich. Il titolo e il contenuto del tooltip possono essere specificati utilizzando rispettivamente gli attributi headline e content.

pulsante

<mdui-tooltip
  variant="rich"
  headline="Tooltip ricco"
  content="I tooltip ricchi attirano l'attenzione su un particolare elemento o funzionalità che merita l'attenzione dell'utente. Supportano più righe di testo informativo."
>
  <mdui-button>pulsante</mdui-button>
</mdui-tooltip>

Sorgente

Oppure, gli slot headline e content possono essere usati per specificare il titolo e il contenuto del tooltip. Lo slot action viene utilizzato per specificare il pulsante di azione del tooltip.

pulsante

Tooltip ricco

I tooltip ricchi attirano l'attenzione su un particolare elemento o funzionalità che merita l'attenzione dell'utente. Supportano più righe di testo informativo.

Azione

<mdui-tooltip variant="rich">
  <mdui-button>pulsante</mdui-button>
  <div slot="headline">Tooltip ricco</div>
  <div slot="content">I tooltip ricchi attirano l'attenzione su un particolare elemento o funzionalità che merita l'attenzione dell'utente. Supportano più righe di testo informativo.</div>
  <mdui-button slot="action" variant="text">Azione</mdui-button>
</mdui-tooltip>

Sorgente

Posizionamento

L'attributo placement imposta la posizione del tooltip.

<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>

Sorgente

Metodo di attivazione

L'attributo trigger imposta come viene attivato il tooltip.

pulsante

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

Sorgente

Ritardo di apertura/chiusura

Quando il metodo di attivazione è hover, gli attributi open-delay e close-delay impostano rispettivamente i ritardi di apertura e chiusura. L'unità è in millisecondi.

pulsante

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

Sorgente

Stato Disabilitato

L'attributo disabled disabilita il tooltip.

pulsante

<mdui-tooltip disabled content="tooltip">
  <mdui-button>pulsante</mdui-button>
</mdui-tooltip>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Forma del tooltip. Il valore predefinito è `plain`. I valori opzionali includono: `plain`: testo semplice, adatto per testi semplici su una riga `rich`: testo ricco, può contenere titolo, corpo e pulsanti di azione
`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'`
Posizione del tooltip. Il valore predefinito è `auto`. I valori opzionali includono: `auto`: determina automaticamente la posizione. Quando `variant="plain"`, dà priorità a `top`; quando `variant="rich"`, dà priorità a `bottom-right`. `top-left`: in alto a sinistra `top-start`: in alto a sinistra `top`: in alto al centro `top-end`: in alto a destra `top-right`: in alto a destra `bottom-left`: in basso a sinistra `bottom-start`: in basso a sinistra `bottom`: in basso al centro `bottom-end`: in basso a destra `bottom-right`: in basso a destra `left-start`: a sinistra in alto `left`: a sinistra al centro `left-end`: a sinistra in basso `right-start`: a destra in alto `right`: a destra al centro `right-end`: a destra in basso
`open-delay`	`openDelay`	`number`	`150`
Ritardo prima della comparsa al passaggio del mouse, in millisecondi
`close-delay`	`closeDelay`	`number`	`150`
Ritardo per la chiusura attivata dal passaggio del mouse, in millisecondi
`headline`	`headline`	`string`	-
Titolo del tooltip. Utilizzabile solo quando `variant="rich"`. Può anche essere impostato tramite `slot="headline"`.
`content`	`content`	`string`	-
Contenuto del tooltip. Può anche essere impostato tramite `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Modalità di apertura. Supporta più valori separati da spazi. I valori opzionali includono: `click`: apre al clic `hover`: apre al passaggio del mouse `focus`: apre al focus `manual`: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
`disabled`	`disabled`	`boolean`	`false`
Se il tooltip deve essere disabilitato
`open`	`open`	`boolean`	`false`
Se mostrare il tooltip

Eventi

Nome
`open`
L'evento viene attivato all'inizio dell'apertura del tooltip. È possibile impedirne l'apertura chiamando `event.preventDefault()`.
`opened`
L'evento viene attivato al termine dell'animazione di apertura del tooltip.
`close`
L'evento viene attivato all'inizio della chiusura del tooltip. È possibile impedire la chiusura del tooltip chiamando `event.preventDefault()`.
`closed`
L'evento viene attivato al termine dell'animazione di chiusura del tooltip.

Slots

Nome
(predefinito)
Elemento di destinazione che attiva il tooltip, solo il primo elemento nello slot `default` fungerà da elemento di destinazione.
`headline`
Titolo del tooltip, questo slot è valido solo quando `variant="rich"`.
`content`
Contenuto del tooltip, può contenere HTML. Se contiene solo testo semplice, è possibile utilizzare l'attributo `content` come alternativa.
`action`
Pulsanti nella parte inferiore del tooltip, questo slot è valido solo quando `variant="rich"`.

CSS Parts

Nome
`popup`
Contenitore del tooltip
`headline`
Titolo
`content`
Corpo
`action`
Pulsanti di azione

CSS Custom Property

Nome
`--shape-corner-plain`
Quando variant="plain", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
`--shape-corner-rich`
Quando variant="rich", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
`--z-index`
Valore CSS `z-index` del componente

Capitolo precedente

TextField

Capitolo successivo

TopAppBar