Tooltip

A popup that displays informational text when hovering, clicking, focusing, or right-clicking on an element.

Basic

<VxTooltip content="This is a tooltip">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Theme

Dark (default) and light themes.

<VxTooltip content="Dark theme" theme="dark">...</VxTooltip>
<VxTooltip content="Light theme" theme="light">...</VxTooltip>

Custom Color

Set any background and text color.

<VxTooltip content="Blue" color="#3b82f6" text-color="#fff" arrow>
  <VxButton>Blue</VxButton>
</VxTooltip>

<VxTooltip content="Green" color="#22c55e" text-color="#fff" arrow>
  <VxButton>Green</VxButton>
</VxTooltip>

<VxTooltip content="Gradient" color="linear-gradient(135deg, #667eea, #764ba2)" text-color="#fff">
  <VxButton>Gradient</VxButton>
</VxTooltip>

Arrow

Show a directional arrow pointing to the trigger.

<VxTooltip content="With arrow" arrow>
  <VxButton>Hover me</VxButton>
</VxTooltip>

<VxTooltip content="Light arrow" arrow theme="light">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Trigger

Supports hover (default), click, focus, and contextmenu triggers.

<VxTooltip content="Hover" trigger="hover">...</VxTooltip>
<VxTooltip content="Click" trigger="click">...</VxTooltip>
<VxTooltip content="Focus" trigger="focus">...</VxTooltip>
<VxTooltip content="Right-click" trigger="contextmenu">...</VxTooltip>

v-model

Programmatically control tooltip visibility with v-model.

<script setup>
const visible = ref(false)
</script>

<VxTooltip v-model="visible" content="Controlled tooltip">
  <VxButton>Target</VxButton>
</VxTooltip>

<VxButton @click="visible = !visible">Toggle</VxButton>

Before Show Hook

Run an async validation before the tooltip appears. Return false or throw to block it.

<script setup>
async function check() {
  const ok = await verifyPermission()
  return ok
}
</script>

<VxTooltip content="Allowed!" :before-show="check">
  <VxButton>Guarded</VxButton>
</VxTooltip>

Auto Close

Automatically dismiss the tooltip after a timeout (in ms).

<VxTooltip content="Disappears in 2s" :auto-close="2000">
  <VxButton>Auto Close</VxButton>
</VxTooltip>

Copyable

Click the tooltip to copy its text content to clipboard.

<VxTooltip content="npm install veloxui" copyable @copy="onCopy">
  <code>npm install veloxui</code>
</VxTooltip>

Loading

Show a spinner inside the tooltip.

<VxTooltip loading>
  <VxButton>Loading</VxButton>
</VxTooltip>

Persistent (v-show)

Keep the tooltip DOM node alive when hidden. Useful for performance when the tooltip is frequently toggled.

<VxTooltip content="I stay in the DOM" persistent>
  <VxButton>Persistent</VxButton>
</VxTooltip>

Teleport

Teleport the tooltip to body to escape overflow: hidden containers.

<div style="overflow: hidden;">
  <VxTooltip content="I escape!" teleport-to="body">
    <VxButton>Teleported</VxButton>
  </VxTooltip>
</div>

Content Slot

Use the #content slot for rich tooltip content.

<VxTooltip theme="light" arrow>
  <template #content>
    <div>
      <strong>Pro tip</strong>
      <p>Rich content in tooltips</p>
    </div>
  </template>
  <VxButton>Rich Content</VxButton>
</VxTooltip>

Raw HTML

Render HTML strings with the raw prop.

<VxTooltip content="<strong>bold</strong> and <em>italic</em>" raw>
  <VxButton>Raw HTML</VxButton>
</VxTooltip>

Always Visible

<VxTooltip content="I'm always here" always>
  <VxButton>Always Visible</VxButton>
</VxTooltip>

Delay

Customize show and hide delays in milliseconds.

<VxTooltip content="Slow" :show-delay="500">...</VxTooltip>
<VxTooltip content="Instant" :show-delay="0" :hide-delay="0">...</VxTooltip>

Non-Enterable

Tooltip hides immediately when the cursor leaves the trigger.

<VxTooltip content="Enterable" :enterable="true">...</VxTooltip>
<VxTooltip content="Not enterable" :enterable="false">...</VxTooltip>

Disabled

<VxTooltip content="Hidden" disabled>
  <VxButton disabled>Disabled</VxButton>
</VxTooltip>

On Various Elements

<VxTooltip content="Badge"><VxBadge value="3" /></VxTooltip>
<VxTooltip content="Avatar"><VxAvatar name="John" /></VxTooltip>
<VxTooltip content="Help"><span class="help">What?</span></VxTooltip>

API

Props

Prop	Type	Default	Description
v-model	boolean	—	Programmatic visibility control
content	string	''	Tooltip text content
trigger	'hover' | 'click' | 'focus' | 'contextmenu'	'hover'	How to trigger the tooltip
theme	'dark' | 'light'	'dark'	Visual theme
color	string	''	Custom background color (CSS value, supports gradients)
textColor	string	''	Custom text color
arrow	boolean	false	Show directional arrow
disabled	boolean	false	Disable the tooltip
showDelay	number	100	Delay before showing (ms)
hideDelay	number	100	Delay before hiding (ms)
autoClose	number	0	Auto-dismiss after N ms (0 = disabled)
offset	number	8	Distance from trigger in px
maxWidth	string | number	280	Maximum tooltip width
enterable	boolean	true	Keep tooltip open when cursor enters it
raw	boolean	false	Render content as raw HTML
always	boolean	false	Keep tooltip permanently visible
copyable	boolean	false	Click tooltip to copy text to clipboard
loading	boolean	false	Show loading spinner instead of content
persistent	boolean	false	Keep DOM alive when hidden (v-show vs v-if)
beforeShow	() => boolean | Promise<boolean>	—	Async guard; return false or throw to block
teleportTo	string	''	Teleport target (e.g. 'body') to escape overflow
transition	string	'vx-tooltip'	Custom transition name

Events

Event	Payload	Description
update:modelValue	boolean	v-model sync
show	—	Tooltip became visible
hide	—	Tooltip was hidden
copy	string	Text was copied to clipboard (when copyable)

Slots

Slot	Description
default	Trigger element
content	Custom tooltip content (replaces content prop)

Exposed Methods

Method	Description
show()	Programmatically show the tooltip
hide()	Programmatically hide the tooltip
updatePosition()	Recalculate position