Vue Tooltip

A lightweight Vue 3 tooltip directive library written in TypeScript.

Features

• ✅ Vue 3 support
• ✅ TypeScript support with full type definitions
• ✅ Automatic positioning (top, bottom, left, right)
• ✅ Custom styles support
• ✅ Dynamic show/hide
• ✅ 300ms delay
• ✅ Dark mode support
• ✅ Lightweight (~1.3KB gzipped)

Installation

# npm
npm install @mat3uszkek/vue-tooltip

# pnpm
pnpm add @mat3uszkek/vue-tooltip

# yarn
yarn add @mat3uszkek/vue-tooltip

Usage

Global Plugin Registration

import { createApp } from 'vue'
import { TooltipPlugin } from '@mat3uszkek/vue-tooltip'
import App from './App.vue'

const app = createApp(App)

// Register plugin with automatic style injection
app.use(TooltipPlugin)

// Or with options
app.use(TooltipPlugin, {
  injectStyles: false // disable automatic styles if you want to use your own
})

app.mount('#app')

Component Usage

<template>
  <div>
    <!-- Simple text tooltip -->
    <button v-tooltip="'This is a simple tooltip'">
      Hover me
    </button>

    <!-- Tooltip with configuration -->
    <button v-tooltip="tooltipConfig">
      Tooltip with options
    </button>

    <!-- Tooltip with position -->
    <span v-tooltip="{ text: 'Bottom tooltip', position: 'bottom' }">
      Bottom positioned
    </span>
  </div>
</template>

<script setup lang="ts">
import type { TooltipConfig } from '@mat3uszkek/vue-tooltip'

const tooltipConfig: TooltipConfig = {
  text: 'This is a configured tooltip',
  position: 'right',
  styles: {
    backgroundColor: '#007bff',
    color: 'white',
    borderRadius: '8px'
  }
}
</script>

Local Directive Import

<script setup lang="ts">
import { tooltip } from '@mat3uszkek/vue-tooltip'

// Use directive locally
const vTooltip = tooltip
</script>

<template>
  <button v-tooltip="'Local tooltip'">
    Button with tooltip
  </button>
</template>

Configuration

TooltipConfig Interface

interface TooltipConfig {
  readonly text: string                    // Tooltip text (required)
  readonly styles?: Partial<CSSProperties> // Custom CSS styles
  readonly position?: TooltipPosition      // Tooltip position
  readonly visible?: boolean               // Whether tooltip should be visible
}

type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'

Configuration Examples

// Simple text
v-tooltip="'Simple tooltip'"

// Basic configuration
v-tooltip="{ text: 'My tooltip' }"

// With position
v-tooltip="{ text: 'Left tooltip', position: 'left' }"

// With custom styles
v-tooltip="{
  text: 'Styled tooltip',
  styles: {
    backgroundColor: '#ff6b6b',
    color: 'white',
    fontSize: '14px',
    padding: '12px 16px'
  }
}"

// Hidden tooltip
v-tooltip="{ text: 'Hidden', visible: false }"

CSS Styles

The package includes default styles that are automatically injected. You can disable them during plugin registration:

app.use(TooltipPlugin, { injectStyles: false })

Custom Styles

If you disable automatic styles, you can import and use your own:

import { tooltipStyles, injectTooltipStyles } from '@mat3uszkek/vue-tooltip'

// Inject manually
injectTooltipStyles()

// Or access the CSS string
console.log(tooltipStyles)

You can also override default CSS styles:

.app-tooltip {
  background-color: #your-color !important;
  /* your custom styles */
}

/* Dark mode */
.dark .app-tooltip {
  background-color: #your-dark-color !important;
}

Tooltip Positions

Available positions:

• 'top' (default)
• 'bottom'
• 'left'
• 'right'

TypeScript

The package includes full TypeScript definitions. All types are exported:

import type {
  TooltipConfig,
  TooltipPosition,
  TooltipElement
} from '@mat3uszkek/vue-tooltip'

License

MIT