Vue BaseTooltip

Vue BaseTooltip is a library, built with Floating UI, that aims to provide a simple way to add good-looking, performant, and flexible tooltips to your application.

🗒️ Documentation

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

npm i -S vue-base-tooltip

Yarn

yarn add vue-base-tooltip

CDN

Vue BaseTooltip can be loaded via CDN using ESM or UMD format.

ESM

import VueBaseTooltip from 'https://unpkg.com/vue-base-tooltip/dist/vue-base-tooltip.es.js'

UMD

<script src="https://unpkg.com/vue-base-tooltip/dist/vue-base-tooltip.umd.js"></script>

Default CSS

<link rel="stylsheet" href="https://unpkg.com/vue-base-tooltip/dist/style.css" />

Simple Usage

Import the plugin to your app and install it.

// 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 of the docs.

// 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.

<button v-tooltip="'This is a tooltip'">Button</button>

Advanced Usage

For advanced usage, please check out the docs (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.

License

MIT License © 2022-present Carl Lidström Dreyer