Tooltip · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JTooltip } from '@juxtui/ui'

Usage #

<JTooltip content="Copy link">
  <JButton variant="ghost" icon aria-label="Copy link"><LinkIcon /></JButton>
</JTooltip>

After one tooltip has been shown, neighbouring tooltips open instantly for a moment — scanning a toolbar never means waiting at each icon.

Tooltips never hold essential information. If it matters, put it on the page.

Variants & examples #

Placement#

<script setup lang="ts">
const sides = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <JTooltip v-for="side in sides" :key="side" :content="`On the ${side}`" :side="side">
    <JButton variant="outline" size="sm">{{ side }}</JButton>
  </JTooltip>
</template>

Move across the buttons: only the first tooltip waits.

<script setup lang="ts">
import { Bold, Code, Italic, Link, List, Quote } from '@lucide/vue'

const tools = [
  { label: 'Bold', icon: Bold },
  { label: 'Italic', icon: Italic },
  { label: 'Code', icon: Code },
  { label: 'Link', icon: Link },
  { label: 'List', icon: List },
  { label: 'Quote', icon: Quote },
]
</script>

<template>
  <div class="flex gap-0.5 rounded-md border border-border bg-surface p-1 shadow-xs" role="toolbar" aria-label="Formatting">
    <JTooltip v-for="tool in tools" :key="tool.label" :content="tool.label">
      <JButton variant="ghost" size="sm" icon :aria-label="tool.label">
        <component :is="tool.icon" />
      </JButton>
    </JTooltip>
  </div>
</template>

API #

Props

Prop	Type	Default	Description
content	`string`	—	Tooltip text. Use the `content` slot for richer content.
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Preferred side. Flips when there isn’t room.
align	`'start' \| 'center' \| 'end'`	`'center'`	Alignment along the side.
delay	`number`	`450`	Hover delay in ms. Keyboard focus shows it immediately.
disabled	`boolean`	`false`	Turn the tooltip off.

Slots

Slot	Props	Description
default	—	The trigger element.
content	—	Custom tooltip content.

Accessibility #

The trigger is described with aria-describedby, pointing at a node that always exists — announcements don’t depend on timing.
The tooltip can be hovered, so it doesn’t vanish on the way to reading it (WCAG 1.4.13).
Clicking the trigger hides the tooltip until the pointer leaves.
Touch devices don’t show tooltips on tap; don’t rely on them for mobile.

Keyboard #

Key	Action
`Tab`	Focusing the trigger with the keyboard shows the tooltip.
`Esc`	Hides the tooltip.