Built-in Tooltip directive (x-tooltip)

#1673

Closed glennmichael123 opened this 10 days ago · {{ comments.length }} {{ comments.length === 1 ? 'comment' : 'comments' }}

glennmichael123 10 days ago

Summary

Add a lightweight tooltip directive for hover hints — no library needed.

Usage

<button x-tooltip="Save your changes">Save</button>
<button x-tooltip.bottom="Delete this item" x-tooltip.type="warning">Delete</button>

<!-- Or with the composable -->
<script client>
  const tooltipRef = useRef('myBtn')
  useTooltip(tooltipRef, 'Tooltip text', { position: 'top' })
</script>

API

`x-tooltip` directive

x-tooltip="text" — top position (default)
x-tooltip.top / x-tooltip.bottom / x-tooltip.left / x-tooltip.right
x-tooltip.delay="500" — show delay in ms

`useTooltip()` composable

useTooltip(ref: RefObject, text: string, options?: {
  position?: 'top' | 'bottom' | 'left' | 'right'
  delay?: number
}): void

Implementation

Process x-tooltip in the signals runtime (alongside x-model, x-class etc.)
Single shared tooltip element, repositioned on hover
CSS arrow pointer
Dark mode support
Fade in/out animation

glennmichael123 10 days ago

Delivered via @stacksjs/components, which ships with every stx app and is auto-registered (no import needed in .stx files). See CLAUDE.md § "Reach for stx primitives before vanilla JS" for the full inventory; the relevant components for this request are documented there.

Closing as effectively delivered. If a specific behavior or API affordance from the original request is missing from the shipped components, please open a focused ticket against @stacksjs/components describing the exact gap — that's easier to track than a broad "make it a builtin" ask.