Tooltip

Display prompt information on mouse hover.

?

Name	Category	Description	Type	Default
effect	? Style	Theme effect	'dark' | 'light'	'dark'
maxWidth	? Style	Max width; text wraps when exceeded	string | number	—
showArrow	? Style	Whether to show arrow	boolean	false
transition	? Style	Transition name	string	'fade'
type	? Color	Theme color	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
disabled	? State	Whether disabled	boolean	false
placement	? Behavior	Position	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	'bottom'
trigger	? Behavior	Trigger mode	'hover' | 'click' | 'contextmenu'	'hover'
manual	? Behavior	Manual control mode	boolean	false
enterable	? Behavior	Whether the mouse can enter the tooltip	boolean	true
showTimeout	? Behavior	Show delay (ms)	number	0
hideTimeout	? Behavior	Hide delay (ms)	number	200
virtualTriggering	? Behavior	Whether to use a virtual trigger element	boolean	false
virtualRef	? Behavior	Reference to the virtual trigger element	HTMLElement	—
popperOptions	? Behavior	popper.js options	object	—
content	? Content	Display content	string	—
visible-change	? Event	Triggered when visibility changes	(visible: boolean) => void	—
click-outside	? Event	Triggered when clicking outside	() => void	—
default	? Slot	Element that triggers Tooltip		—
content	? Slot	Custom content		—
show	? Expose	Show Tooltip	() => void	—
hide	? Expose	Hide Tooltip	() => void	—
toggle	? Expose	Toggle Tooltip visibility	() => void	—

Basic Usage

Use content attribute to set the tooltip content.

<template>
  <px-tooltip content="This is tooltip content">
    <px-button>Hover me</px-button>
  </px-tooltip>
</template>

Effect

Use effect to switch between dark and light themes.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Dark effect (default)" effect="dark">
      <px-button>Dark</px-button>
    </px-tooltip>
    <px-tooltip content="Light effect" effect="light">
      <px-button>Light</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Themed Colors

Use type to apply themed color variants.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Primary" type="primary">
      <px-button type="primary">Primary</px-button>
    </px-tooltip>
    <px-tooltip content="Success" type="success">
      <px-button type="success">Success</px-button>
    </px-tooltip>
    <px-tooltip content="Warning" type="warning">
      <px-button type="warning">Warning</px-button>
    </px-tooltip>
    <px-tooltip content="Danger" type="danger">
      <px-button type="danger">Danger</px-button>
    </px-tooltip>
    <px-tooltip content="Info" type="info">
      <px-button type="info">Info</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

Placement

Use placement attribute to set the tooltip position.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Top" placement="top">
      <px-button>Top</px-button>
    </px-tooltip>
    <px-tooltip content="Bottom" placement="bottom">
      <px-button>Bottom</px-button>
    </px-tooltip>
    <px-tooltip content="Left" placement="left">
      <px-button>Left</px-button>
    </px-tooltip>
    <px-tooltip content="Right" placement="right">
      <px-button>Right</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

Trigger

Use trigger attribute to set the trigger mode.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Hover trigger" trigger="hover">
      <px-button>Hover</px-button>
    </px-tooltip>
    <px-tooltip content="Click trigger" trigger="click">
      <px-button>Click</px-button>
    </px-tooltip>
    <px-tooltip content="Right click trigger" trigger="contextmenu">
      <px-button>Right Click</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Max Width

Use max-width to constrain the tooltip width. Long text wraps automatically.

<template>
  <px-tooltip
    content="This is a very long tooltip content that will be constrained by the max-width property, causing the text to wrap to multiple lines."
    max-width="200px"
  >
    <px-button>Max Width 200px</px-button>
  </px-tooltip>
</template>

Enterable

When enterable is true (default), the tooltip remains visible while the cursor is over it. Set to false to hide immediately on mouseleave.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="You can hover over me" :enterable="true">
      <px-button>Enterable (default)</px-button>
    </px-tooltip>
    <px-tooltip content="I will disappear immediately" :enterable="false">
      <px-button>Not Enterable</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Manual Control

Use manual mode with exposed show / hide / toggle methods for programmatic control.

<template>
  <div class="demo-tooltip">
    <px-tooltip ref="tooltipRef" content="Manual control" :manual="true">
      <px-button>Manual Tooltip</px-button>
    </px-tooltip>
    <px-button @click="tooltipRef?.show()">Show</px-button>
    <px-button @click="tooltipRef?.hide()">Hide</px-button>
    <px-button @click="tooltipRef?.toggle()">Toggle</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tooltipRef = ref();
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Disabled

Use disabled attribute to disable the tooltip.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="Disabled tooltip" :disabled="disabled">
      <px-button>{{ disabled ? 'Disabled' : 'Enabled' }}</px-button>
    </px-tooltip>
    <px-button @click="disabled = !disabled">Toggle</px-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const disabled = ref(false);
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Virtual Triggering

Use virtual-triggering and virtual-ref to trigger the tooltip from an external DOM element.

<template>
  <div class="demo-tooltip">
    <div ref="triggerRef" class="virtual-trigger">
      Virtual Trigger Element
    </div>
    <px-tooltip
      content="I'm triggered by the element above"
      :virtual-triggering="true"
      :virtual-ref="triggerRef"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const triggerRef = ref();
</script>

<style scoped>
.demo-tooltip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.virtual-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 2px dashed var(--px-border-color);
  cursor: pointer;
  font-family: var(--px-font-family);
}
</style>

Show Arrow

Use show-arrow to display a pixel-style arrow pointing to the trigger element.

<template>
  <div class="demo-tooltip">
    <px-tooltip content="With pixel arrow" :show-arrow="true" placement="top">
      <px-button>Top Arrow</px-button>
    </px-tooltip>
    <px-tooltip content="With pixel arrow" :show-arrow="true" placement="bottom">
      <px-button>Bottom Arrow</px-button>
    </px-tooltip>
    <px-tooltip content="No arrow (default)">
      <px-button>No Arrow</px-button>
    </px-tooltip>
  </div>
</template>

<style scoped>
.demo-tooltip {
  display: flex;
  gap: 12px;
}
</style>

Custom Content

Use the content slot for rich HTML content inside the tooltip.

<template>
  <px-tooltip trigger="click">
    <px-button>Rich Content</px-button>
    <template #content>
      <div class="custom-content">
        <strong>Custom Tooltip</strong>
        <p>Supports rich HTML content via the <code>content</code> slot.</p>
      </div>
    </template>
  </px-tooltip>
</template>

<style scoped>
.custom-content {
  max-width: 200px;
}
.custom-content p {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: 0.85;
}
</style>