TooltipTooltip

A tooltip egy adott elemhez kapcsolódó rövid magyarázatot vagy kontextusinformációt jelenít meg, hogy a felhasználó jobban megértse az elem funkcióját vagy rendeltetését.

Használat

A komponens importálása:

import 'mdui/components/tooltip.js';

A komponens TypeScript-típusának importálása:

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

Példa:

gomb

<mdui-tooltip content="Egyszerű tooltip">
  <mdui-button>gomb</mdui-button>
</mdui-tooltip>

Példák

Egyszerű szöveges tooltip

Alapértelmezés szerint egyszerű szöveges tooltip. A content attribútummal állíthatja be a tooltip tartalmát.

gomb

<mdui-tooltip content="Egyszerű tooltip">
  <mdui-button>gomb</mdui-button>
</mdui-tooltip>

Forrás

A content slotban is beállíthatja a tooltip tartalmát.

gomb

cím

tartalom

<mdui-tooltip>
  <mdui-button>gomb</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">cím</div>
    <div>tartalom</div>
  </div>
</mdui-tooltip>

Forrás

Gazdag tooltip

Állítsa a variant attribútumot rich értékre a gazdag tooltip létrehozásához. A headline attribútummal állíthatja be a tooltip címét, a content attribútummal a tartalmát.

gomb

<mdui-tooltip
  variant="rich"
  headline="Gazdag tooltip"
  content="A gazdag tooltipek felhívják a figyelmet egy adott elemre vagy funkcióra, amely megérdemli a felhasználó fókuszát. Több sornyi információs szöveget támogatnak."
>
  <mdui-button>gomb</mdui-button>
</mdui-tooltip>

Forrás

A headline és content slotokon keresztül is beállíthatja a tooltip címét és tartalmát. Az action slot használatával műveleti gombot adhat a tooltiphez.

gomb

Gazdag tooltip

A gazdag tooltipek felhívják a figyelmet egy adott elemre vagy funkcióra, amely megérdemli a felhasználó fókuszát. Több sornyi információs szöveget támogatnak.

Művelet

<mdui-tooltip variant="rich">
  <mdui-button>gomb</mdui-button>
  <div slot="headline">Gazdag tooltip</div>
  <div slot="content">A gazdag tooltipek felhívják a figyelmet egy adott elemre vagy funkcióra, amely megérdemli a felhasználó fókuszát. Több sornyi információs szöveget támogatnak.</div>
  <mdui-button slot="action" variant="text">Művelet</mdui-button>
</mdui-tooltip>

Forrás

Pozíció

A placement attribútummal beállíthatja a tooltip pozícióját.

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

Forrás

Aktiválási mód

A trigger attribútummal beállíthatja a tooltip aktiválási módját.

gomb

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

Forrás

Nyitás/zárás késleltetése

Ha az aktiválási mód hover, az open-delay és close-delay attribútumokkal beállíthatja a tooltip nyitásának és zárásának késleltetését ezredmásodpercben.

gomb

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

Forrás

Letiltott állapot

A disabled attribútummal letilthatja a tooltip-et.

gomb

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

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
A tooltip variánsa. Alapértelmezés szerint `plain`. Lehetséges értékek: `plain`: Egyszerű szöveg, egysoros szöveghez `rich`: Rich text, tartalmazhat címet, törzsszöveget és műveleti gombokat
`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'`
A tooltip pozíciója. Alapértelmezés szerint `auto`. Lehetséges értékek: `auto`: Automatikus pozíció meghatározás. `variant="plain"` esetén előnyben részesíti a `top`-ot; `variant="rich"` esetén előnyben részesíti a `bottom-right`-ot `top-left`: Bal felső sarokban `top-start`: Fent, balra igazítva `top`: Fent, középre igazítva `top-end`: Fent, jobbra igazítva `top-right`: Jobb felső sarokban `bottom-left`: Bal alsó sarokban `bottom-start`: Lent, balra igazítva `bottom`: Lent, középre igazítva `bottom-end`: Lent, jobbra igazítva `bottom-right`: Jobb alsó sarokban `left-start`: Balra, felülre igazítva `left`: Balra, középre igazítva `left-end`: Balra, alulra igazítva `right-start`: Jobbra, felülre igazítva `right`: Jobbra, középre igazítva `right-end`: Jobbra, alulra igazítva
`open-delay`	`openDelay`	`number`	`150`
Az egérrel fölé vive történő megjelenítés késleltetése, ezredmásodpercben.
`close-delay`	`closeDelay`	`number`	`150`
Az egérrel fölé vive történő elrejtés késleltetése, ezredmásodpercben.
`headline`	`headline`	`string`	-
A tooltip címe. Csak `variant="rich"` esetén használható. Beállítható a `slot="headline"` segítségével is.
`content`	`content`	`string`	-
A tooltip tartalma. Beállítható a `slot="content"` segítségével is.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Kiváltási mód, több érték is megadható szóközzel elválasztva. Lehetséges értékek: `click`: Kattintáskor aktiválódik `hover`: Egérrel fölé vive aktiválódik `focus`: Fókuszáláskor aktiválódik `manual`: Csak programozottan lehet megnyitni és bezárni a tooltip-et, más kiváltási mód nem adható meg
`disabled`	`disabled`	`boolean`	`false`
A tooltip letiltása.
`open`	`open`	`boolean`	`false`
A tooltip látható-e.

Események

Név
`open`
A tooltip megjelenítésének kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a tooltip megnyitása.
`opened`
A tooltip megjelenítési animációjának befejezésekor aktiválódik az esemény.
`close`
A tooltip elrejtésének kezdetekor aktiválódik az esemény. Az `event.preventDefault()` meghívásával megakadályozható a tooltip bezárása.
`closed`
A tooltip elrejtési animációjának befejezésekor aktiválódik az esemény.

Slots

Név
(alapértelmezett)
A tooltip által kiváltott cél elem, csak a `default` slot-ban lévő első elem lesz a cél elem.
`headline`
A tooltip címe, csak akkor érvényes, ha a `variant="rich"`.
`content`
A tooltip tartalma, tartalmazhat HTML-t. Ha csak egyszerű szöveget tartalmaz, a `content` attribútum is használható helyette.
`action`
A tooltip alján található gomb, csak akkor érvényes, ha a `variant="rich"`.

CSS Parts

Név
`popup`
A tooltip konténere.
`headline`
Cím.
`content`
Törzsszöveg.
`action`
Műveleti gomb.

CSS egyéni tulajdonságok

Név
`--shape-corner-plain`
A komponens sarok lekerekítésének mérete, ha a `variant="plain"`. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--shape-corner-rich`
A komponens sarok lekerekítésének mérete, ha a `variant="rich"`. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

TextField Szövegmező

Következő fejezet

TopAppBar Felső alkalmazássáv