Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/CarlLDreyer/vue-base-tooltip
Basic, performant Vue tooltip directive.
https://github.com/CarlLDreyer/vue-base-tooltip
floating-ui tooltip vue
Last synced: about 2 months ago
JSON representation
Basic, performant Vue tooltip directive.
- Host: GitHub
- URL: https://github.com/CarlLDreyer/vue-base-tooltip
- Owner: CarlLDreyer
- License: mit
- Created: 2022-09-17T09:07:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-06T18:35:33.000Z (about 2 years ago)
- Last Synced: 2024-04-25T10:02:57.291Z (9 months ago)
- Topics: floating-ui, tooltip, vue
- Language: TypeScript
- Homepage: https://carlldreyer.github.io/vue-base-tooltip/
- Size: 1.77 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - Vue BaseTooltip - A simple and performant tooltip plugin using Floating UI. (Packages)
README
# Vue BaseTooltip
Vue BaseTooltip is a library, built with [Floating UI](https://floating-ui.com/), that aims to provide a simple way to add good-looking, performant, and flexible tooltips to your application.
### [🗒️ Documentation](https://carlldreyer.github.io/vue-base-tooltip/)
## Features
* 🫶 **Uncomplicated:** Easy to install and use.
* 🎨 **Customizable:** Style according to your needs using plain CSS.
* ☁️ **CDN:** No bundler required.
* 🤸 **Flexible:** Use as plugin or directly import the component and directive.
* 📦 **Lightweight:** The package only weighs ~2kb.
* 🦾 **Type Strong:** Written in TypeScript.
## Installation
Vue BaseTooltip can be installed using your favorite package manager or directly via CDN.
### npm
```shell
npm i -S vue-base-tooltip
```
### Yarn
```shell
yarn add vue-base-tooltip
```
### CDN
Vue BaseTooltip can be loaded via CDN using ESM or UMD format.
#### ESM
```js
import VueBaseTooltip from 'https://unpkg.com/vue-base-tooltip/dist/vue-base-tooltip.es.js'
```
#### UMD
```html
```
#### Default CSS
```html
```
## Simple Usage
Import the plugin to your app and install it.
```js
// main.ts/js
import VueBaseTooltip from 'vue-base-tooltip'
app.use(VueBaseTooltip)
```
Add the default styling, this is optional in case you want to style your tooltip from scratch, as described in the [styling section](https://carlldreyer.github.io/vue-base-tooltip/guide/styling.html#use-100-of-your-own-css) of the docs.
```js
// main.ts/js
import VueBaseTooltip from 'vue-base-tooltip'
import 'vue-base-tooltip/style.css'
app.use(VueBaseTooltip)
```
Use the v-tooltip directive to add a tooltip to an element.
```html
Button
```
## Advanced Usage
For advanced usage, please check out the [docs](https://carlldreyer.github.io/vue-base-tooltip/guide.html#advanced-usage) (I didn't want to make the readme too long).
## Feedback
Any feedback is gladly received, whether it's a code improvement or feature request, open an issue / connect with me on [LinkedIn](https://www.linkedin.com/in/carlldreyer/).
## License
[MIT License](https://github.com/CarlLDreyer/vue-base-tooltip/blob/main/LICENSE) © 2022-present [Carl Lidström Dreyer](https://github.com/CarlLDreyer)