TooltipTooltip

Tooltip poskytuje krátké textové nápovědy nebo kontextové informace ke konkrétnímu prvku, aby uživatel lépe pochopil jeho funkci nebo účel.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/tooltip.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

tlačítko

<mdui-tooltip content="Prostý tooltip">
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Příklady

Tooltip s prostým textem

Ve výchozím nastavení je tooltip prostý. Obsah tooltipu můžete nastavit pomocí atributu content.

tlačítko

<mdui-tooltip content="Prostý tooltip">
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Zdrojový kód

Obsah tooltipu můžete také nastavit pomocí slotu content.

tlačítko

název

obsah

<mdui-tooltip>
  <mdui-button>tlačítko</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">název</div>
    <div>obsah</div>
  </div>
</mdui-tooltip>

Zdrojový kód

Tooltip s bohatým obsahem

Nastavením atributu variant na rich vytvoříte tooltip s bohatým obsahem. Pomocí atributu headline můžete nastavit název tooltipu a atributem content nastavit obsah tooltipu.

tlačítko

<mdui-tooltip
  variant="rich"
  headline="Bohatý tooltip"
  content="Bohaté tooltipy upozorňují na určitý prvek nebo funkci, která si zaslouží pozornost uživatele. Podporují víceřádkový informační text."
>
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Zdrojový kód

Lze také nastavit název a obsah tooltipu pomocí slotů headline a content. Pomocí slotu action nastavte akční tlačítko tooltipu.

tlačítko

Bohatý tooltip

Bohaté tooltipy upozorňují na určitý prvek nebo funkci, která si zaslouží pozornost uživatele. Podporují víceřádkový informační text.

Akce

<mdui-tooltip variant="rich">
  <mdui-button>tlačítko</mdui-button>
  <div slot="headline">Bohatý tooltip</div>
  <div slot="content">Bohaté tooltipy upozorňují na určitý prvek nebo funkci, která si zaslouží pozornost uživatele. Podporují víceřádkový informační text.</div>
  <mdui-button slot="action" variant="text">Akce</mdui-button>
</mdui-tooltip>

Zdrojový kód

Umístění

Pomocí atributu placement můžete nastavit umístění tooltipu.

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

Zdrojový kód

Způsob spuštění

Pomocí atributu trigger můžete nastavit způsob spuštění tooltipu.

tlačítko

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Zdrojový kód

Zpoždění otevření/zavření

Když je způsob spuštění hover, můžete pomocí atributů open-delay a close-delay nastavit zpoždění otevření a zavření tooltipu v milisekundách.

tlačítko

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Zdrojový kód

Zakázaný stav

Přidáním atributu disabled můžete zakázat tooltip.

tlačítko

<mdui-tooltip disabled content="tooltip">
  <mdui-button>tlačítko</mdui-button>
</mdui-tooltip>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Varianta tooltipu. Výchozí je `plain`. Možné hodnoty: `plain`: Pouze text, vhodné pro jednoduchý jednořádkový text. `rich`: Formátovaný text, může obsahovat nadpis, tělo a akční tlačítka.
`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'`
Umístění tooltipu. Výchozí je `auto`. Možné hodnoty: `auto`: Automatické určení polohy. Pokud je `variant="plain"`, preferuje se `top`; pokud je `variant="rich"`, preferuje se `bottom-right`. `top-left`: Vlevo nahoře. `top-start`: Nahoře vlevo. `top`: Nahoře uprostřed. `top-end`: Nahoře vpravo. `top-right`: Vpravo nahoře. `bottom-left`: Vlevo dole. `bottom-start`: Dole vlevo. `bottom`: Dole uprostřed. `bottom-end`: Dole vpravo. `bottom-right`: Vpravo dole. `left-start`: Vlevo nahoře. `left`: Vlevo uprostřed. `left-end`: Vlevo dole. `right-start`: Vpravo nahoře. `right`: Vpravo uprostřed. `right-end`: Vpravo dole.
`open-delay`	`openDelay`	`number`	`150`
Zpoždění (v ms) před otevřením při najetí myší.
`close-delay`	`closeDelay`	`number`	`150`
Zpoždění (v ms) před zavřením při najetí myší.
`headline`	`headline`	`string`	-
Nadpis tooltipu. Lze použít pouze pokud je `variant="rich"`. Lze také nastavit pomocí `slot="headline"`.
`content`	`content`	`string`	-
Obsah tooltipu. Lze také nastavit pomocí `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Způsob spuštění. Lze zadat více hodnot oddělených mezerami. Možné hodnoty: `click`: Spuštění kliknutím. `hover`: Spuštění najetím myší. `focus`: Spuštění získáním fokusu. `manual`: Tooltip lze otevřít a zavřít pouze programově. Nelze kombinovat s jiným způsobem spuštění.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je tooltip zakázaný.
`open`	`open`	`boolean`	`false`
Určuje, zda je tooltip zobrazen.

Události

Název
`open`
Spustí se na začátku zobrazování tooltipu. Otevření lze zabránit voláním `event.preventDefault()`.
`opened`
Spustí se po dokončení animace zobrazení tooltipu.
`close`
Spustí se na začátku skrývání tooltipu. Zavření lze zabránit voláním `event.preventDefault()`.
`closed`
Spustí se po dokončení animace skrytí tooltipu.

Slots

Název
(výchozí)
Cílový prvek, který tooltip spouští. Jako cílový prvek se použije pouze první prvek ve výchozím slotu.
`headline`
Nadpis tooltipu. Tento slot je platný pouze pokud je `variant="rich"`.
`content`
Obsah tooltipu, může obsahovat HTML. Pokud obsahuje pouze prostý text, lze místo toho použít atribut `content`.
`action`
Tlačítka akcí v dolní části tooltipu. Tento slot je platný pouze pokud je `variant="rich"`.

CSS Parts

Název
`popup`
Kontejner tooltipu.
`headline`
Nadpis.
`content`
Tělo.
`action`
Tlačítka akcí.

CSS Custom Properties

Název
`--shape-corner-plain`
Velikost zaoblení rohů komponenty, pokud je `variant="plain"`. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--shape-corner-rich`
Velikost zaoblení rohů komponenty, pokud je `variant="rich"`. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Předchozí kapitola

TextField Textové pole

Další kapitola

TopAppBar Horní aplikační lišta