TooltipTooltip

Tooltip dostarcza dodatkowych podpowiedzi tekstowych lub informacji kontekstowych dla określonego elementu, pomagając zrozumieć jego funkcję lub przeznaczenie.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/tooltip.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

przycisk

<mdui-tooltip content="Zwykły tooltip">
  <mdui-button>przycisk</mdui-button>
</mdui-tooltip>

Przykłady

Zwykły tooltip

Domyślnie tooltip jest zwykły. Możesz ustawić treść tooltipa za pomocą atrybutu content.

przycisk

<mdui-tooltip content="Zwykły tooltip">
  <mdui-button>przycisk</mdui-button>
</mdui-tooltip>

Źródło

Możesz również ustawić treść tooltipa za pomocą slotu content.

przycisk

tytuł

treść

<mdui-tooltip>
  <mdui-button>przycisk</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">tytuł</div>
    <div>treść</div>
  </div>
</mdui-tooltip>

Źródło

Bogaty tooltip

Ustawienie atrybutu variant na rich tworzy bogaty tooltip. Możesz ustawić tytuł tooltipa za pomocą atrybutu headline, a treść za pomocą atrybutu content.

przycisk

<mdui-tooltip
  variant="rich"
  headline="Bogaty tooltip"
  content="Bogate tooltipy zwracają uwagę na konkretny element lub funkcję, która wymaga skupienia użytkownika. Obsługują wiele linii tekstu informacyjnego."
>
  <mdui-button>przycisk</mdui-button>
</mdui-tooltip>

Źródło

Możesz również ustawić tytuł i treść tooltipa za pomocą slotów headline i content. Użyj slotu action, aby dodać przycisk akcji.

przycisk

Bogaty tooltip

Bogate tooltipy zwracają uwagę na konkretny element lub funkcję, która wymaga skupienia użytkownika. Obsługują wiele linii tekstu informacyjnego.

Akcja

<mdui-tooltip variant="rich">
  <mdui-button>przycisk</mdui-button>
  <div slot="headline">Bogaty tooltip</div>
  <div slot="content">Bogate tooltipy zwracają uwagę na konkretny element lub funkcję, która wymaga skupienia użytkownika. Obsługują wiele linii tekstu informacyjnego.</div>
  <mdui-button slot="action" variant="text">Akcja</mdui-button>
</mdui-tooltip>

Źródło

Pozycja

Atrybut placement ustawia pozycję tooltipa.

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

Źródło

Sposób wyzwalania

Atrybut trigger ustawia sposób wyzwalania tooltipa.

przycisk

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

Źródło

Opóźnienie otwierania/zamykania

Gdy sposób wyzwalania to hover, możesz ustawić opóźnienie otwierania i zamykania tooltipa za pomocą atrybutów open-delay i close-delay, odpowiednio w milisekundach.

przycisk

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

Źródło

Stan wyłączony

Dodanie atrybutu disabled wyłącza tooltip.

przycisk

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Wariant tooltipa. Domyślnie `plain`. Dozwolone wartości: `plain`: Zwykły tekst, odpowiedni dla prostego, jednowierszowego tekstu `rich`: Tekst sformatowany, może zawierać tytuł, treść i przyciski akcji
`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'`
Pozycja tooltipa. Domyślnie `auto`. Dozwolone wartości: `auto`: Automatyczne określenie pozycji. Gdy `variant="plain"`, preferowane jest `top`; gdy `variant="rich"`, preferowane jest `bottom-right` `top-left`: W lewym górnym rogu `top-start`: Nad elementem, wyrównany do lewej `top`: Nad elementem, wyśrodkowany `top-end`: Nad elementem, wyrównany do prawej `top-right`: W prawym górnym rogu `bottom-left`: W lewym dolnym rogu `bottom-start`: Pod elementem, wyrównany do lewej `bottom`: Pod elementem, wyśrodkowany `bottom-end`: Pod elementem, wyrównany do prawej `bottom-right`: W prawym dolnym rogu `left-start`: Po lewej stronie, wyrównany do góry `left`: Po lewej stronie, wyśrodkowany `left-end`: Po lewej stronie, wyrównany do dołu `right-start`: Po prawej stronie, wyrównany do góry `right`: Po prawej stronie, wyśrodkowany `right-end`: Po prawej stronie, wyrównany do dołu
`open-delay`	`openDelay`	`number`	`150`
Opóźnienie wyświetlenia po najechaniu myszą, w milisekundach
`close-delay`	`closeDelay`	`number`	`150`
Opóźnienie ukrycia po najechaniu myszą, w milisekundach
`headline`	`headline`	`string`	-
Tytuł tooltipa. Można używać tylko, gdy `variant="rich"`. Można również ustawić za pomocą `slot="headline"`
`content`	`content`	`string`	-
Treść tooltipa. Można również ustawić za pomocą `slot="content"`
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Sposób wyzwalania. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości: `click`: Wywoływane po kliknięciu `hover`: Wywoływane po najechaniu myszą `focus`: Wywoływane po otrzymaniu fokusu `manual`: Można otwierać i zamykać tooltip tylko programowo, nie można określić innych sposobów wyzwalania
`disabled`	`disabled`	`boolean`	`false`
Określa, czy tooltip jest wyłączony.
`open`	`open`	`boolean`	`false`
Określa, czy tooltip jest wyświetlany.

Zdarzenia

Nazwa
`open`
Wywoływane przed wyświetleniem tooltipa. Można zapobiec otwarciu, wywołując `event.preventDefault()`
`opened`
Wywoływane po zakończeniu animacji wyświetlania tooltipa
`close`
Wywoływane przed ukryciem tooltipa. Można zapobiec zamknięciu, wywołując `event.preventDefault()`
`closed`
Wywoływane po zakończeniu animacji ukrywania tooltipa

Slots

Nazwa
(domyślny)
Element docelowy wyzwalający tooltip, tylko pierwszy element w slocie domyślnym będzie elementem docelowym
`headline`
Tytuł tooltipa, ten slot jest skuteczny tylko wtedy, gdy `variant="rich"`
`content`
Treść tooltipa, może zawierać HTML. Jeśli zawiera tylko zwykły tekst, można użyć atrybutu `content` zamiast tego
`action`
Przycisk na dole tooltipa, ten slot jest skuteczny tylko wtedy, gdy `variant="rich"`

CSS Parts

Nazwa
`popup`
Kontener tooltipa
`headline`
Tytuł
`content`
Treść
`action`
Przycisk akcji

Właściwości niestandardowe CSS

Nazwa
`--shape-corner-plain`
Wielkość zaokrąglenia rogów komponentu, gdy variant="plain". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--shape-corner-rich`
Wielkość zaokrąglenia rogów komponentu, gdy variant="rich". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

TextField Pole tekstowe

Następny rozdział

TopAppBar Górny pasek aplikacji