A flexible and lightweight tooltip directive for Vue 3 applications.
- Simple and intuitive usage
- Multiple placement options
- Easy global installation
- Lightweight and performant
- TypeScript support
npm install @uniquedj95/vtooltip
# or
yarn add @uniquedj95/vtooltip
In your main.ts
or main.js
:
import { createApp } from 'vue'
import vTooltip from '@uniquedj95/vtooltip'
const app = createApp(App)
app.use(vTooltip)
<!-- Simple string tooltip -->
<button v-tooltip="'Click me'">Hover</button>
<!-- Object configuration -->
<button
v-tooltip="{
text: 'Custom tooltip',
placement: 'bottom'
}"
>
Hover
</button>
The directive accepts two types of values:
-
String: Direct tooltip text
<div v-tooltip="'Simple tooltip'">Hover me</div>
-
Object: Advanced configuration
<div v-tooltip="{ text: 'Detailed tooltip', placement: 'top' // or 'bottom', 'left', 'right' }" > Hover me </div>
-
top
(default) bottom
left
right
For custom styling, target the .tooltip
class in your CSS:
.tooltip {
background-color: #333;
color: white;
/* Add your custom styles */
}
The package includes TypeScript definitions for full type support.
- Lightweight implementation
- Minimal DOM manipulation
- Efficient event handling
MIT License
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request