martinszeltins / zero-tooltip

zero-tooltip  

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

About

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.

Install

# 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())

Usage

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>

Zero dependencies

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

Customization

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>

ZeroTooltipConfig

Property	Default value	Type	Details
defaultPosition	top	TooltipPosition	Position of tooltip component relative to element that is being hovered
positions	{   left: ['left', 'right', 'top', 'bottom'],   top: ['top', 'bottom', 'right', 'left'],   right: ['right', 'left', 'top', 'bottom'],   bottom: ['bottom', 'top', 'right', 'left'], }	TooltipPositions	Ordered list of fallback positions in case tooltip does not have enough space in default position. If none of given positions will have enough space for tooltip, then it will not be rendered.
offsetFromSource	10	number	Tooltip offset in px from element that's being hovered (arrow size is not added to this value)
offsetFromViewport	20	number	Minimal allowed tooltip offset in px from viewport sides
minWidth	100	number	Minimal tooltip width in px that will be allowed to render
maxWidth	250	number	Maximal tooltip width in px that will be allowed to render
tooltipBorderWidth	0	number	Tooltip container border width in px
tooltipClasses	undefined	string	List of classes that will be added to tooltip element
textClasses	undefined	string	List of classes that will be added to text element
arrowSize	5	number	Length of arrow hypotenuse in px (arrow is generated using border width property, creating square which gets divided in four triangles, thus arrowSize is length of square side)
arrowClasses	undefined	string	List of classes that will be added to arrow element
arrowMinOffsetFromTooltipCorner	6	number	Minimal allowed arrow offset in px from tooltip corner. Used in situations when tooltip does not have enough space to be centered relative to element that is being hover, thus arrow is rendered closer to one of the tooltip corners
zIndex	1	number	z-index css property value of tooltip

ZeroTooltipLocalConfig

Same as ZeroTooltipConfig with following additions:

Property	Default value	Type	Details
content	undefined	string	REQUIRED. Tooltip text. Text is rendered as HTML, thus it's possible to give simple HTML structure, e.g., <h1>Tooltip text</h1>
show	true	boolean	Define whether to show or not to show tooltip

License

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