Tooltip

Usage

Hover Hint

Short hints with low intrusion.

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

Best Practices

• Keep tooltip text short and avoid multiline hints.
• Keep spacing light around the trigger element.
• Put visual complexity in anchor, not in tooltip-specific props.
• Do not place forms, long explanations, or bulk actions inside Tooltip; upgrade complex content to TxPopover / TxDrawer.

Tooltip Button

Icon button with a hint.

Anchor Presets

Show different looks and placement through anchor pass-through.

API Reference

Props

Events

Slots

Anchor Passthrough

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

Click Toggle (close on outside click)

Click Toggle (keep on outside click)

Dashboard Feedback Center

In admin task panels, Tooltip should explain one action or metric without interrupting the flow. Use TxToastHost for persistent task results and TxLoadingOverlay when a panel needs to be blocked during refresh.

Overview

• Hover and focus triggers use openDelay / closeDelay; click trigger delegates toggling and outside-click handling to TxBaseAnchor.
• disabled=true clears pending timers and forces the resolved open state to false.
• interactive=true only affects hover mode. The hover zone is the whole floating layer: the panel box, card padding included, plus the hover bridge between the reference and the panel. Entering it clears the close timer (and any parent panel's); leaving the whole layer schedules the close again.
• A pointer that leaves the reference towards the panel is in transit. While it stays inside the triangle from its exit point to the panel's facing edge (the safe triangle) and keeps moving, the panel does not close on closeDelay, a parent panel does not close because the path crossed out of it, and no other hover trigger along the way opens. A stop longer than 100ms, or a step out of the triangle, gives the trip up: the panel closes on its usual closeDelay, and the trigger the pointer stopped on opens. Leaving through the edge facing away from the panel is not a trip and closes on the delay as before. Plain hints (not interactive) are unchanged.
• Tooltip sets role="tooltip" on the floating body and exposes data-side for placement-aware styling.
• The default anchor animation is { type: 'boom' } (a symmetric focus zoom in and out); an anchor.animation override replaces it entirely.
• There is no arrow by default (anchor.showArrow defaults to false), as across the whole anchor family; once enabled it moves with the panel, and the gap to the trigger stays offset (8px by default).

Technologies

• Open-state contract: TxTooltip is controlled when modelValue is boolean, otherwise it owns internalOpen. Opening/closing emits update:modelValue plus open or close, unless disabled prevents opening.
• Anchor contract: Click trigger defaults closeOnClickOutside and toggleOnReferenceClick to true; other triggers leave those behaviors off unless props or anchor override them.
• Transit: geometry and transit state live in packages/tuffex/packages/utils/hover-intent.ts, which listens to pointermove only during a trip. Parent panels are held by the anchor-delay service's holdChain / releaseChain: a close that comes due during the trip is deferred, runs at once if the pointer gives up, and is dropped if it arrives.
• Rejected design: binding the panel's hover handlers to the content inside the card. The card's padding (8px in DropdownMenu) became a dead ring: reaching the first row meant crossing the offset plus the padding, about 18px, within 100ms, and resting on the panel's edge closed it.
• Rejected design: forgiving the trip with a longer closeDelay (FlatDropdown's 600ms default was hiding the problem). No delay stops a diagonal path: with a menu already open the menu layer's openDelay is 0, so the neighbouring trigger opens on the frame the pointer crosses it and preempts the panel.
• Verified coverage: tooltip.test.ts covers keep-alive defaults, the boom default and animation forwarding, content slot side context, and click outside override behavior. tooltip-hover-intent.test.ts drives the real Popover → Tooltip chain over faked layout: only interactive hover panels get a bridge; a pointer heading for the panel stays open past closeDelay and closes as usual once off course; a trigger crossed on the way does not open, and takes over only when the pointer stops on it; arriving at the panel cancels the close; leaving through the far edge closes as usual.
• Component source: packages/tuffex/packages/components/src/tooltip/src/TxTooltip.vue.
• Types: packages/tuffex/packages/components/src/tooltip/src/types.ts.
• Coverage: packages/tuffex/packages/components/src/tooltip/__tests__/tooltip.test.ts verifies keep-alive defaults, anchor animation forwarding, slot side context, and click outside behavior.