npm package: @mat3uszkek/vue-tooltip
Description: A lightweight Vue 3 tooltip directive with TypeScript support
Author: mat3uszkek
Latest version: 1.0.2

# Vue Tooltip

A lightweight Vue 3 tooltip directive library written in TypeScript.

[![npm version](https://img.shields.io/npm/v/@mat3uszkek/vue-tooltip.svg)](https://www.npmjs.com/package/@mat3uszkek/vue-tooltip)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@mat3uszkek/vue-tooltip)](https://bundlephobia.com/package/@mat3uszkek/vue-tooltip)
[![license](https://img.shields.io/npm/l/@mat3uszkek/vue-tooltip.svg)](https://github.com/mat3uszkek/vue-tooltip/blob/main/LICENSE)

## 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

```bash
# npm
npm install @mat3uszkek/vue-tooltip

# pnpm
pnpm add @mat3uszkek/vue-tooltip

# yarn
yarn add @mat3uszkek/vue-tooltip
```

## Usage

### Global Plugin Registration

```typescript
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

```vue
<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

```vue
<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

```typescript
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

```typescript
// 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:

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

### Custom Styles

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

```typescript
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:

```css
.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:

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

## License

MIT