Vue3 Tooltip

Module for convenient work with tooltips in Vue3 (using a directive and a component)

You can find a CodeSandBox containing the module, along with a demonstration of its functionality and the option to customize its styles, by following this link.

First, let's add a module to your project using npm:

npm install vue3-tooltip

Or you can install using yarn:

yarn add vue3-tooltip

Add dependencies to your main.ts:

import { createApp } from 'vue'
import { TooltipDirective, TooltipComponent } from 'vue3-tooltip';
import 'vue3-tooltip/tooltip.css';

const app = createApp({...})
app.directive('tooltip', TooltipDirective)
app.component('tooltip', TooltipComponent)
app.mount('#app')

To use tooltip as a directive, simply write v-tooltip="..." on any block in HTML:

<p v-tooltip="`Tooltip text`">Some text</p>

You can also customize a directive using arguments and change its position using modifiers:

v-tooltip:bottom (default) - Change tooltip position to bottom

v-tooltip:top - Change tooltip position to top

v-tooltip:right - Change tooltip position to right

v-tooltip:left - Change tooltip position to left

Arguments for changing color (can be customized):

v-tooltip.primary (default)

v-tooltip.secondary

v-tooltip.accent

Example of using arguments and modifiers:

<p v-tooltip:top="My name is ${name}">My name</p>
<p v-tooltip:bottom.secondary="'I am' + years + 'years old'">My age</p>
<p v-tooltip.accent="`I love writing code`">More info</p>
<p v-tooltip:right.primary="secret">Secret info</p>

To use a component you just need to register it in your template:

<tooltip position="bottom">
    <template v-slot:text>
        <p>Point at me and find out the secret</p>
    </template>
    <template v-slot:tooltip>
        <strong>Watermelon is a berry</strong>
    </template>
</tooltip>

The component has the following props (default values are highlighted in bold):

position ('bottom' | 'top' | 'left' | 'right') - change tooltip position

disable (true | false) - make the tooltip and the text for calling the tooltip inactive

clickable (true | false) - do not hide the tooltip when hovering over it

To customize styles, you need to paste your CSS file into main.ts after importing the basic tooltip styles (vue3-tooltip/tooltip.css):

import { TooltipDirective, TooltipComponent } from 'vue3-tooltip';
import 'vue3-tooltip/tooltip.css';
// After this line you need to do your import
import './assets/my-tooltip.scss';

To customize tooltip directive, you need to create a global style file using CSS or Sass. My example demonstrates this process:

.vue-tooltip {
  &::after {
    /*
    * font-size, line-height, max-width, padding, border-radius, box-shadow, transition
    */
  }
  &__primary::after {
    /*
    * background, color
    */
  }
  &__secondary::after {// ... //}
  &__accent::after {// ... //}
}

If you want to explore customization in more detail and change all the classes in the module, you should check them out at this link.

To customize the component, you can also override the standard styles:

.vue-tooltip {
  &.disable {
    // ... //
  }
  &--component {
    /*
    * font-size, line-height, max-width, padding, border-radius, box-shadow, transition
    */
  }
}

You can go deeper into component styles at this link.

Or, instead of redefining classes, you can use variables, on which the entire tooltip design is based. If you want to add new variables, you can write to Issues on GitHub.

:root {
  /* Directive Variables */
  --tooltip-d-transition-duration: 0.4s;
  --tooltip-d-border-radius: 4px;
  --tooltip-d-padding: 2px 4px;
  --tooltip-d-position-x: calc(100% + 10px);
  --tooltip-d-position-y: calc(100% + 2px);
  --tooltip-d-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14),
      0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1),
      0px -1.5px 6px 0px rgba(0, 0, 0, 0.06);
  --tooltip-d-z-index: 10;
  --tooltip-d-max-width: 200px;
  --tooltip-d-font-size: 14px;
  --tooltip-d-width: max-content;
  --tooltip-d-height: max-content;
  --tooltip-d-outline: none;
  --tooltip-d-border: none;

  /* Component Variables */
  --tooltip-c-transition-duration: 0.4s;
  --tooltip-c-border-radius: 4px;
  --tooltip-c-padding: 2px 4px;
  --tooltip-c-position-x: calc(100% + 10px);
  --tooltip-c-position-y: 100%;
  --tooltip-c-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14),
      0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1),
      0px -1.5px 6px 0px rgba(0, 0, 0, 0.06);
  --tooltip-c-z-index: 10;
  --tooltip-c-max-width: max-content;
  --tooltip-c-width: max-content;
  --tooltip-c-height: max-content;
  --tooltip-c-outline: none;
  --tooltip-c-border: none;

  /* Colors */
  --tooltip-primary-color: #212121;
  --tooltip-primary-background: #fff;
  --tooltip-seconary-color: #fff;
  --tooltip-seconary-background: #475DEB;
  --tooltip-accent-color: #fff;
  --tooltip-accent-background: #212121;
  
  --tooltip-component-color: #212121;
  --tooltip-component-background: #fff;
}

I have a positive attitude towards PR and pull requests. Glad to see that people like the package.

• Creator: @neluckoff

• Copyright © 2024 neluckoff.
• This project is MIT licensed.