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 will load when visible.

<template>
  <TxTooltip content="Hint">
    <TxButton variant="ghost">Hover me</TxButton>
  </TxTooltip>
  <TxTooltip content="Info">
    <TxButton variant="ghost">Info</TxButton>
  </TxTooltip>
</template>

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 will load when visible.

<template>
  <TxTooltip
    v-model="open"
    trigger="click"
    content="Click to toggle, click outside to close"
    :anchor="{ showArrow: true }"
  >
    <TxButton variant="ghost">Click me</TxButton>
  </TxTooltip>
</template>

Click Toggle (keep on outside click)

Demo will load when visible.

<template>
  <TxTooltip
    v-model="open"
    trigger="click"
    :close-on-click-outside="false"
    content="Click to toggle, outside click will not close"
    :anchor="{ showArrow: true }"
  >
    <TxButton variant="ghost">Pinned tooltip</TxButton>
  </TxTooltip>
</template>

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 will load when visible.

<template>
  <TxTooltip content="Share">
    <TxButton icon="i-ri-share-line" circle />
  </TxTooltip>
</template>

Anchor Presets

Show different looks and placement through anchor pass-through.

Demo will load when visible.

<template>
  <TxTooltip
    content="Mask background + arrow"
    :anchor="{ showArrow: true, panelBackground: 'mask' }"
  >
    <TxButton variant="ghost">Status detail</TxButton>
  </TxTooltip>

  <TxTooltip
    content="Glass background + right placement"
    :anchor="{ placement: 'right', showArrow: true, panelBackground: 'glass', panelShadow: 'medium' }"
  >
    <TxButton variant="ghost">Service status</TxButton>
  </TxTooltip>
</template>