@maximbigler/vue-big-tooltip

big-tooltip

A small tooltip library for Vue 3. You can use it as a directive, a component or a composable. Positioning is handled by Floating UI.

Getting Started

pnpm add @maximbigler/vue-big-tooltip

Register the plugin. Everything you pass here becomes the default for every tooltip in your app.

import { createApp } from 'vue';
import { TooltipPlugin } from '@maximbigler/vue-big-tooltip';
import App from './App.vue';

createApp(App).use(TooltipPlugin, { placement: 'top' }).mount('#app');

The styles get imported automatically, so you don't have to add a CSS file yourself.

Directive

<button v-tooltip="'Hello there'">Hover me</button>

<!-- the argument sets the placement -->
<button v-tooltip:right="'On the right'">Hover me</button>

<!-- or pass an object -->
<button v-tooltip="{ content: '<b>Bold</b>', html: true }">Hover me</button>

You can also use the .html and .interactive modifiers instead of setting them in the object.

Component

<Tooltip content="Hello there" placement="bottom">
  <button>Hover me</button>
</Tooltip>

The component wraps its content in a span. If you need a different element, use the as prop.

Composable

If you want to control the tooltip yourself:

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import { useTooltip } from '@maximbigler/vue-big-tooltip';

const anchor = useTemplateRef<HTMLElement>('anchor');
const { show, hide, isOpen } = useTooltip(anchor, { content: 'Hello there' });
</script>

<template>
  <button ref="anchor" @click="isOpen ? hide() : show()">Toggle</button>
</template>

Properties

Theming

There are two themes out of the box: default (dark) and light.

Every tooltip gets the class tooltip--<theme>, so making your own theme is just a matter of overriding some CSS variables:

.tooltip--brand {
  --tooltip-background: #42b883;
  --tooltip-color: #ffffff;
}

<Tooltip content="Hello there" theme="brand">
  <button>Hover me</button>
</Tooltip>

These are the variables you can change: