0
# v-tooltip
1

2
v-tooltip provides easy-to-use tooltips, popovers, and dropdowns for Vue 2.x applications with Popper.js integration. It offers both directive-based and component-based approaches for creating interactive tooltips with extensive customization options, positioning control, and support for complex content including Vue components.
3

4
## Package Information
5

6
- **Package Name**: v-tooltip
7
- **Package Type**: npm
8
- **Language**: JavaScript (Vue.js 2.x)
9
- **Installation**: `npm install v-tooltip`
10

11
## Core Imports
12

13
```javascript
14
import Vue from 'vue';
15
import VTooltip from 'v-tooltip';
16

17
Vue.use(VTooltip);
18
```
19

20
For direct imports:
21

22
```javascript
23
import { VTooltip, VPopover, VClosePopover } from 'v-tooltip';
24

25
Vue.directive('tooltip', VTooltip);
26
Vue.directive('close-popover', VClosePopover);
27
Vue.component('v-popover', VPopover);
28
```
29

30
For browser usage:
31

32
```html
33
<script src="https://unpkg.com/v-tooltip@^2.0.0"></script>
34
<script>
35
// Auto-installs if Vue is detected globally
36
// Or manually install:
37
Vue.use(VTooltip);
38
</script>
39
```
40

41
## Basic Usage
42

43
```html
44
<template>
45
  <div>
46
    <!-- Simple tooltip -->
47
    <button v-tooltip="'Hello World!'">Hover me</button>
48
    
49
    <!-- Popover with content -->
50
    <v-popover>
51
      <button>Click me</button>
52
      <template slot="popover">
53
        <h3>Popover Title</h3>
54
        <p>Complex content goes here</p>
55
      </template>
56
    </v-popover>
57
  </div>
58
</template>
59
```
60

61
## Architecture
62

63
v-tooltip is built around several key components:
64

65
- **Plugin System**: Vue.use() installation with global configuration options
66
- **Directive API**: `v-tooltip` directive for simple tooltip functionality
67
- **Component API**: `VPopover` component for complex interactive content
68
- **Core Tooltip Class**: Low-level tooltip implementation with Popper.js integration
69
- **Configuration System**: Global and per-instance options for comprehensive customization
70
- **Event Management**: Support for hover, focus, click, and manual triggers
71
- **Positioning Engine**: Popper.js integration for intelligent positioning
72

73
## Capabilities
74

75
### Tooltip Directive
76

77
Simple tooltip functionality using the `v-tooltip` directive. Supports string content, positioning modifiers, and configuration objects.
78

79
```javascript { .api }
80
// Basic string tooltip
81
v-tooltip="tooltipContent"
82

83
// With positioning modifier
84
v-tooltip.bottom-start="tooltipContent"
85

86
// With configuration object
87
v-tooltip="{ content: 'text', placement: 'top', delay: 500 }"
88
```
89

90
[Tooltip Directive](./tooltip-directive.md)
91

92
### Popover Component
93

94
Advanced popover functionality with Vue component slots for complex interactive content.
95

96
```javascript { .api }
97
// Component registration
98
Vue.component('v-popover', VPopover);
99

100
// Component props
101
interface VPopoverProps {
102
  open?: boolean;
103
  disabled?: boolean;
104
  placement?: string;
105
  delay?: string | number | object;
106
  trigger?: string;
107
  // ... additional props
108
}
109
```
110

111
[Popover Component](./popover-component.md)
112

113
### Global Configuration
114

115
System-wide configuration options for default behavior and styling.
116

117
```javascript { .api }
118
// Plugin options during installation
119
Vue.use(VTooltip, options);
120

121
// Direct configuration
122
VTooltip.options.defaultClass = 'my-tooltip';
123
VTooltip.enabled = window.innerWidth > 768;
124
```
125

126
[Global Configuration](./global-configuration.md)
127

128
### Low-Level Tooltip API
129

130
Direct access to the underlying Tooltip class for advanced use cases.
131

132
```javascript { .api }
133
import { createTooltip, destroyTooltip } from 'v-tooltip';
134

135
function createTooltip(el: HTMLElement, value: any, modifiers?: object): Tooltip;
136
function destroyTooltip(el: HTMLElement): void;
137
```
138

139
[Low-Level API](./low-level-api.md)
140

141
## Types
142

143
```typescript { .api }
144
interface DelayConfig {
145
  show?: number;
146
  hide?: number;
147
}
148

149
interface VTooltipPlugin {
150
  install(Vue: any, options?: Partial<GlobalVTooltipOptions>): void;
151
  enabled: boolean;
152
  options: GlobalVTooltipOptions;
153
}
154

155
interface GlobalVTooltipOptions {
156
  defaultPlacement: string;
157
  defaultClass: string;
158
  defaultTargetClass: string;
159
  defaultHtml: boolean;
160
  defaultTemplate: string;
161
  defaultArrowSelector: string;
162
  defaultInnerSelector: string;
163
  defaultDelay: number | DelayConfig;
164
  defaultTrigger: string;
165
  defaultOffset: number | string;
166
  defaultContainer: string | HTMLElement | false;
167
  defaultBoundariesElement: string | HTMLElement;
168
  defaultPopperOptions: any;
169
  defaultLoadingClass: string;
170
  defaultLoadingContent: string;
171
  autoHide: boolean;
172
  defaultHideOnTargetClick: boolean;
173
  disposeTimeout: number;
174
  popover: Partial<GlobalVTooltipPopoverOptions>;
175
}
176

177
interface GlobalVTooltipPopoverOptions {
178
  defaultPlacement: string;
179
  defaultClass: string;
180
  defaultBaseClass: string;
181
  defaultWrapperClass: string;
182
  defaultInnerClass: string;
183
  defaultArrowClass: string;
184
  defaultOpenClass: string;
185
  defaultDelay: number | DelayConfig;
186
  defaultTrigger: string;
187
  defaultOffset: number | string;
188
  defaultContainer: string | HTMLElement | false;
189
  defaultBoundariesElement: string | HTMLElement;
190
  defaultPopperOptions: any;
191
  defaultAutoHide: boolean;
192
  defaultHandleResize: boolean;
193
}
194
```