STooltip <s-tooltip>

Ein kurzes Label, das erscheint, wenn ein anderes Element mit der Maus berührt oder fokussiert wird. STooltip ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-tooltip>.

import { STooltip } from 'polaris-vue-elements'

Best Practices

• Tooltips für zusätzliche, nicht wesentliche Details. Sie eignen sich für Informationen, die das Verständnis fördern, aber nicht erforderlich sind. Verstecken Sie niemals Fehler, wesentliche Informationen oder notwendige Anweisungen in einem Tooltip.
• Mit Icon-Buttons kombinieren. Ein Icon-Button braucht einen Tooltip, der erklärt, was er tut; nennen Sie die Aktion und, falls vorhanden, ihr Tastenkürzel.
• Den Text knapp halten. Ideal ist eine kurze Wendung oder ein kurzer Satz. Wird der Inhalt lang, verdient er vermutlich einen sichtbareren Platz in der UI.
• Viele Tooltips als Warnsignal verstehen. Braucht die Oberfläche viele davon, um verständlich zu sein, verbessern Sie lieber Labels, Layout oder Informationsarchitektur.
• An Touch-Geräte denken. Tooltips funktionieren nur auf dem Desktop und erscheinen nicht auf Touchscreens. Zeigen Sie wichtige Informationen auf Mobilgeräten daher standardmäßig an.

<SButton icon="delete" accessibilityLabel="Delete product" interestFor="delete-tip" />
<STooltip id="delete-tip">Delete product</STooltip>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-tooltip> (auf Englisch).

Beispiel

Bewegen Sie den Mauszeiger über die Schaltfläche unten oder fokussieren Sie sie, um den Tooltip anzuzeigen: Er wird über interestFor aktiviert, nicht per Klick.

Hover or focus meExtra context shown on hover or focus.

<script setup>
import { SButton, SText, STooltip } from 'polaris-vue-elements'
</script>

<template>
  <!-- interestFor activates the target on hover/focus, unlike commandFor which
       requires a click/activation. -->
  <SButton interestFor="example-tooltip">Hover or focus me</SButton>

  <STooltip id="example-tooltip">
    <SText>Extra context shown on hover or focus.</SText>
  </STooltip>
</template>

Props

Prop	Typ	Beschreibung
id	string	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Der informative Text oder die Elemente im Tooltip-Overlay, die hilfreichen Kontext oder Erklärungen liefern, wenn Benutzer mit dem zugehörigen Element interagieren. Akzeptiert nur Text, Paragraph-Komponenten und reinen textContent.