Tuff Docs

Small and lightweight hints that do not interrupt the flow.
Status: Beta

Tooltip is a semantic wrapper over TxBaseAnchor:

Tooltip handles trigger timing and hint content;
Anchor handles positioning, animation, and panel visuals;
use anchor to pass anchor-level configuration.
TxPopover reuses the same chain to keep overlay behavior consistent.

Demo

Hover Hint

Short hints with low intrusion.

Demo loads on client.

Basic Usage

<template>
  <TxTooltip content="Copied">
    <TxButton variant="ghost">Copy</TxButton>
  </TxTooltip>
</template>

Anchor Passthrough

<template>
  <TxTooltip
    content="Bottom tooltip"
    :anchor="{ placement: 'bottom', showArrow: true, panelBackground: 'mask' }"
  >
    <TxButton variant="ghost">Bottom</TxButton>
  </TxTooltip>
</template>

Click Toggle (close on outside click)

Demo loads on client.

Click Toggle (keep on outside click)

Demo loads on client.

API (Lite)

Property	Type	Description
content		Tooltip text
trigger	hoverclickfocus	Trigger mode
open-delay		Open delay (ms)
close-delay		Close delay (ms)
interactive		Allow pointer to enter floating panel in hover mode
keep-alive-content		Keep floating content state mounted after close
close-on-click-outside		Whether outside click closes the tooltip in click mode
toggle-on-reference-click		Whether clicking reference toggles open/close
max-height		Tooltip max height
anchor		Pass-through config for TxBaseAnchor (placement/showArrow/panelBackground, etc.)

Design Notes

Keep text short and avoid multiline hints.
Keep spacing light around the trigger element.
Put visual complexity in anchor, not in tooltip-specific props.

Composite Patterns

Icon button with a hint.

Demo loads on client.

Anchor Presets

Show different looks and placement through anchor pass-through.

Demo loads on client.