Tooltip

Tooltips dienen dazu, ergänzenden Text oder Kontextinformationen zu einem bestimmten Element bereitzustellen, damit Benutzer die Funktion oder den Zweck des Elements besser verstehen können.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/tooltip.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

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

Beispiel:

Button

<mdui-tooltip content="Einfacher Tooltip">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Beispiele

Einfacher Text-Tooltip

Standardmäßig wird ein einfacher Text-Tooltip verwendet. Sie können den Inhalt des Tooltips mit dem Attribut content festlegen.

Button

<mdui-tooltip content="Einfacher Tooltip">
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Quellcode

Sie können den Inhalt des Tooltips auch über den Slot content festlegen.

Button

Titel

Inhalt

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

Quellcode

Rich-Tooltip

Setzen Sie das Attribut variant auf rich, um einen Rich-Tooltip zu erstellen. Titel und Inhalt des Tooltips legen Sie mit den Attributen headline und content fest.

Button

<mdui-tooltip
  variant="rich"
  headline="Rich-Tooltip"
  content="Rich-Tooltips heben ein bestimmtes Element oder eine Funktion hervor, die besondere Aufmerksamkeit verdient. Sie unterstützen mehrere Textzeilen."
>
  <mdui-button>Button</mdui-button>
</mdui-tooltip>

Quellcode

Sie können den Titel und den Inhalt auch über die Slots headline und content festlegen. Verwenden Sie den Slot action, um einen Aktionsbutton im Tooltip hinzuzufügen.

Button

Rich-Tooltip

Rich-Tooltips heben ein bestimmtes Element oder eine Funktion hervor, die besondere Aufmerksamkeit verdient. Sie unterstützen mehrere Textzeilen.

Aktion

<mdui-tooltip variant="rich">
  <mdui-button>Button</mdui-button>
  <div slot="headline">Rich-Tooltip</div>
  <div slot="content">Rich-Tooltips heben ein bestimmtes Element oder eine Funktion hervor, die besondere Aufmerksamkeit verdient. Sie unterstützen mehrere Textzeilen.</div>
  <mdui-button slot="action" variant="text">Aktion</mdui-button>
</mdui-tooltip>

Quellcode

Position

Über das Attribut placement können Sie die Position des Tooltips festlegen.

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

Quellcode

Auslösemechanismus

Über das Attribut trigger können Sie den Auslösemechanismus des Tooltips festlegen.

Button

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

Quellcode

Verzögerung beim Öffnen/Schließen

Wenn der Auslösemechanismus hover ist, können Sie mit den Attributen open-delay und close-delay die Verzögerung beim Öffnen und Schließen des Tooltips in Millisekunden festlegen.

Button

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

Quellcode

Deaktivierter Zustand

Fügen Sie das Attribut disabled hinzu, um den Tooltip zu deaktivieren.

Button

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

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Definiert die Tooltip-Variante. Standard ist `plain`. Mögliche Werte: `plain`: Für einfachen, einzeiligen Text. `rich`: Für Tooltips mit einem Titel, Textkörper und Aktionsschaltflächen.
`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'`
Die Position des Tooltips. Standard ist `auto`. Mögliche Werte: `auto`: Position wird automatisch bestimmt. Bei `variant="plain"` wird `top` bevorzugt; bei `variant="rich"` wird `bottom-right` bevorzugt. `top-left`: Oben links. `top-start`: Oben, linksbündig. `top`: Oben, zentriert. `top-end`: Oben, rechtsbündig. `top-right`: Oben rechts. `bottom-left`: Unten links. `bottom-start`: Unten, linksbündig. `bottom`: Unten, zentriert. `bottom-end`: Unten, rechtsbündig. `bottom-right`: Unten rechts. `left-start`: Links, oben ausgerichtet. `left`: Links, zentriert. `left-end`: Links, unten ausgerichtet. `right-start`: Rechts, oben ausgerichtet. `right`: Rechts, zentriert. `right-end`: Rechts, unten ausgerichtet.
`open-delay`	`openDelay`	`number`	`150`
Die Verzögerung (in Millisekunden), bevor der Tooltip bei Mouseover erscheint.
`close-delay`	`closeDelay`	`number`	`150`
Die Verzögerung (in Millisekunden), bevor der Tooltip bei Mouseover verschwindet.
`headline`	`headline`	`string`	-
Legt den Tooltip-Titel fest. Gilt nur, wenn `variant="rich"`. Alternativ können Sie `slot="headline"` verwenden.
`content`	`content`	`string`	-
Legt den Tooltip-Inhalt fest. Alternativ können Sie `slot="content"` verwenden.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Definiert, wie der Tooltip geöffnet wird. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte: `click`: Wird bei Klick ausgelöst. `hover`: Wird bei Mouseover ausgelöst. `focus`: Wird beim Fokussieren ausgelöst. `manual`: Kann nur programmgesteuert geöffnet und geschlossen werden; es können keine anderen Auslösemethoden angegeben werden.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert den Tooltip.
`open`	`open`	`boolean`	`false`
Öffnet den Tooltip.

Ereignisse

Name
`open`
Wird ausgelöst, wenn der Tooltip beginnt, sich zu öffnen. Kann mit `event.preventDefault()` verhindert werden.
`opened`
Wird ausgelöst, nachdem der Tooltip geöffnet wurde und die Animationen abgeschlossen sind.
`close`
Wird ausgelöst, wenn der Tooltip beginnt, sich zu schließen. Kann mit `event.preventDefault()` verhindert werden.
`closed`
Wird ausgelöst, nachdem der Tooltip geschlossen wurde und die Animationen abgeschlossen sind.

Slots

Name
Standard
Zielelement, das den Tooltip auslöst. Nur das erste Element im `default`-Slot wird als Ziel verwendet.
`headline`
Tooltip-Titel. Gilt nur, wenn `variant="rich"`.
`content`
Tooltip-Inhalt, der HTML enthalten kann. Wenn Sie nur Text benötigen, können Sie auch das `content`-Attribut verwenden.
`action`
Aktionsschaltfläche am unteren Rand des Tooltips. Nur verfügbar, wenn `variant="rich"`.

CSS Parts

Name
`popup`
Container für den Tooltip.
`headline`
Titel des Tooltips.
`content`
Textkörper des Tooltips.
`action`
Aktionsschaltfläche des Tooltips.

CSS Custom Property

Name
`--shape-corner-plain`
Eckradius der Komponente bei `variant="plain"`. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--shape-corner-rich`
Eckradius der Komponente bei `variant="rich"`. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--z-index`
Der CSS `z-index`-Wert der Komponente.

Vorherige Seite

TextField

Nächste Seite

TopAppBar