martinszeltins / zero-tooltip Goto Github PK

zero-tooltip is a Vue 3 simple tooltip component for displaying information text when hovering over element.

The component is designed to enhance user interactions by providing informative tooltips when hovering over specific element by rendering overlay with given text next to it. Components settings are fully customizable.

# npm
npm install zero-tooltip

# yarn
yarn add zero-tooltip

# pnpm
pnpm install zero-tooltip

Register plugin in main.ts:

import ZeroTooltip from 'zero-tooltip'

const app = createApp(App)

app.use(ZeroTooltip())

Tooltip can be used with directive v-tooltip added on elements. The given value is displayed as tooltip's text:

<button v-tooltip="'Submits this form'">Submit</button>

This component does not depend on any other package, except Vue 3

Default position for tooltip is above/on top of the element that is being hovered. You can change position by passing argument to directive:

<button v-tooltip:right="'Submits this form'">Submit</button>

Acceptable arguments are: left | top | right | bottom. This will override tooltip default position that was set during plugin registering process.

You can also define default position globally when registering plugin:

app.use(ZeroTooltip({
    defaultPosition: 'right'
}))

Tooltip component is fully customizable by giving config object as options when registering tooltip plugin:

import ZeroTooltipConfig from 'zero-tooltip'

const tooltipConfig: ZeroTooltipConfig = {
    defaultPosition: ... ,
    positions: ... ,
    offsetFromSource: ... ,
    offsetFromViewport: ... ,
    minWidth: ... ,
    maxWidth: ... ,
    tooltipBorderWidth: ... ,
    tooltipClasses: ... ,
    textClasses: ... ,
    arrowSize: ... ,
    arrowClasses: ... ,
    arrowMinOffsetFromTooltipCorner: ... ,
    zIndex: ...
}

app.use(ZeroTooltip(tooltipConfig))

All above settings are optional.

Tooltip can be customizable also for each usage (locally) using same config as follows:

<template>
    <button v-tooltip:right="tooltipConfig">Submit</button>
</template>

<script setup lang="ts">
import ZeroTooltipLocalConfig from 'zero-tooltip'

const tooltipConfig: ZeroTooltipLocalConfig = reactive({
    content: 'This is tooltip',
    defaultPosition: ... ,
    positions: ... ,
    offsetFromSource: ... ,
    offsetFromViewport: ... ,
    minWidth: ... ,
    maxWidth: ... ,
    tooltipBorderWidth: ... ,
    tooltipClasses: ... ,
    textClasses: ... ,
    arrowSize: ... ,
    arrowClasses: ... ,
    arrowMinOffsetFromTooltipCorner: ... ,
    zIndex: ... ,
    show: ...
})
</script>

Same as ZeroTooltipConfig with following additions:

The license is MIT, so any extension, forking is welcome. zero-tooltip is designed as fully customizable, zero dependency, simple tooltip for Vue.js.