Tooltipps 1.2.0

Leichte Texthinweise bei Hover/Fokus. Verfügbar als <velin-tooltip> Web Component oder die reine CSS- .velin-tooltip Klasse. English: Tooltipps

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Kurze ergänzende Labels für Icon-only-Controls oder abgeschnittenen Text.
Bevorzuge <velin-tooltip>, wenn du Viewport-Flip und aria-describedby-Verdrahtung brauchst.
Bevorzuge das CSS-Pattern für statische Tipps, die nur Hover/focus-within brauchen.

Wann nicht

Rich content, forms, or links inside the tip — use Popover.
Essential instructions the user must read without hovering — put them in the page or an Alert.
Do not invent a flip attribute or data-tooltip — those are not part of the 1.2.0 API.

Umschließe Trigger und ein .velin-tooltip__content-Child. Optional platziert .velin-tooltip--bottom den Tipp darunter.

<span class="velin-tooltip" tabindex="0">
  Hover me
  <span class="velin-tooltip__content">Hello from a tooltip!</span>
</span>

<span class="velin-tooltip velin-tooltip--bottom" tabindex="0">
  Bottom
  <span class="velin-tooltip__content">Shown below</span>
</span>

Web Component

Nutze <velin-tooltip> mit content und optionalem placement (top default, bottom, start, end). Slotte den fokussierbaren Trigger.

<velin-tooltip content="Tooltip text" placement="top">
  <button type="button" class="velin-btn velin-btn--secondary">Hover / focus</button>
</velin-tooltip>

Flip-Verhalten

Flip is automatic on show for top/bottom when the tip would leave the viewport. There is no flip attribute — do not add one.

Barrierefreiheit

Das Tipp-Panel nutzt role="tooltip".
While visible, the slotted trigger gets aria-describedby pointing at the tip id.
Shows on pointer enter and focus-in; hides on leave, focus-out, or Escape.
CSS-only tips need a focusable trigger (tabindex="0" or a control) so keyboard users can reveal them via :focus-within.
content is HTML-escaped before render.

API

Attributes (`<velin-tooltip>`)

Attribut	Typ	Beschreibung
`content`	String	Observed — tip text (escaped). Use `content`, not `text` (that attribute is ignored).
`placement`	String	Observed — `top` (default), `bottom`, `start`, `end`
`visible`	Boolean	Set by the component while open (not a public show API)

Slots & Parts

Name	Art	Beschreibung
(default)	Slot	Trigger-Element
`tip`	CSS part	Shadow-Tippfläche

No public methods or events. CSS pattern: .velin-tooltip, .velin-tooltip__content, .velin-tooltip--bottom.

Best Practices & Fallstricke

Halte Tipptext kurz; platziere nie interaktive Inhalte in einem Tooltip.
Prefer logical start/end placements on the WC for RTL-friendly UIs.
Do not use deprecated <velin-tooltip-wc> in new markup.
Do not invent text="…" on <velin-tooltip> — the tip string is always content.

Popover — rich anchored panels
Dropdown — action menus
A11y-Patterns

Legacy `*-wc` Tags

<velin-tooltip-wc> and <velin-stepper-wc> remain registered as deprecated aliases. Prefer <velin-tooltip> and <velin-stepper> in new markup.