Vue 3 & Nuxt 3 Tooltip

Features

• Vue 3 compatible!
• Nuxt 3 compatible!
• Generic registration allows it to be used inside any app!
• Fully written in Typescript with full types support
• Easy to set up for real, you can make it work in less than 10sec!
• Customize everything
• Use your custom components as the tooltip body for endless possibilities!
• Define behavior per tooltip
• Use your themes and animations easily
• And much more!

Installation

$ yarn add @programic/vue3-tooltip
$ npm install --save @programic/vue3-tooltip

Usage

Plugin registration

Add it as a plugin to your app:

import { createApp } from "vue";
import Tooltip from "@programic/vue3-tooltip";
// Import the CSS or use your own!
import '@programic/vue3-tooltip/dist/index.css';

const app = createApp(...);

const options = {
    // You can set your default options here
};

app.use(Tooltip, options);

Or, if you are using Typescript:

import { createApp } from "vue";
import Tooltip from '@programic/vue3-tooltip';
import type { TooltipConfiguration } from '@programic/vue3-tooltip';

// Import the CSS or use your own!
import '@programic/vue3-tooltip/dist/index.css';

const app = createApp(...);

const options: TooltipConfiguration = {
    // You can set your default options here
};

app.use(Tooltip, options);

Or, if you are using Nuxt 3:

Create a tooltip.ts in the plugins folder with the following code

// tooltip.ts
import { defineNuxtPlugin } from "#app";
import Tooltip from '@programic/vue3-tooltip';

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(Tooltip)
});

Creating tooltips by directive

To create tooltips by directive, add v-tooltip on your element

<p><span v-tooltip="this is a tooltip">Hover me</span></p>

Creating tooltips by component

For more options and configurations use tooltip by a component

<script>
    import { Tooltip } from '@programic/vue3-tooltip';
</script>

<template>
    <Tooltip title="tooltip test">Hover me</Tooltip>
</template>

Positioning the Tooltip

By default, the tooltip will be displayed at the top of the element, but you can set it manually using the placement option.

You can use the type definitions or one of the allowed values: top, right, bottom, left.

import Tooltip from '@programic/vue3-tooltip';

app.use(Tooltip, {
    // Setting the global default position
    position: 'bottom',
});


// Or set it per tooltip
<Tooltip title="tooltip test" placement="bottom">Hover me</Tooltip>

Tooltip types

Depending on the context, you may want to use tooltips of different colors. You can easily do that by setting the type of tooltip to be displayed.

<Tooltip title="tooltip test" type="light">Hover me</Tooltip>

// You can also set the type programmatically when calling the default toast
import Tooltip from '@programic/vue3-tooltip';

app.use(Tooltip, {
    // Setting the global default type
    type: 'light',
});

API

Plugin registration (app.use)

| Option | Type | Default | Description | |------------------------|-------------------------------------------------------------------|-----------------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | placement | String | top | Position of the toast on the screen. Can be any of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left. | | container | Object or Boolean | true | Whether or not the newest toasts are placed on the top of the stack. |

Tooltip (props)

| Props | Type | Required | Description | |-------------|-------------|----------|------------------------------------------------------------------| | container | HTMLElement | No | Override global container config where tooltip needs teleported) | | trigger | String | No | When the tooltip opens | | placement | String | No | The position of the tooltip | | size | String | No | The tooltip size | | type | String | No | The tooltip type | | title | String | No | The tooltip title | | description | String | No | The tooltip description |

License

Copyright (C) 2022 Programic. Licensed under MIT