DEV Community

loading...
Cover image for Vue3 Tooltip

Vue3 Tooltip

primetek profile image PrimeTek ・2 min read

Vue3 Tooltip directive provides advisory information for a component.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Getting Started

Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.

import Tooltip from 'primevue/tooltip';

app.directive('tooltip', Tooltip);
Enter fullscreen mode Exit fullscreen mode

Tooltip can also be configured locally using the directives property of your component.

directives: {
    'tooltip': Tooltip
}
Enter fullscreen mode Exit fullscreen mode

Once the tooltip is configured, it can be attached to a target using the v- prefix.

<InputText type="text" v-tooltip="'Enter your username'" />
Enter fullscreen mode Exit fullscreen mode

 Positions

There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is specified using a modifier.

<InputText type="text" v-tooltip.right="'Enter your username'" />
<InputText type="text" v-tooltip.top="'Enter your username'" />
<InputText type="text" v-tooltip.bottom="'Enter your username'" />
<InputText type="text" v-tooltip.top="'Enter your username'" />
Enter fullscreen mode Exit fullscreen mode

 Events

Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.

<InputText type="text" v-tooltip.focus="'Enter your username'" />
Enter fullscreen mode Exit fullscreen mode

Modifiers

As seen in positions and event sections, tooltip is configured via modifiers that can be chained. Tooltip below, gets displayed at the top of the input at focus event.

<InputText type="text" v-tooltip.top.focus="'Enter your username'" />
Enter fullscreen mode Exit fullscreen mode

Theming

Tooltip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Tooltip showcase for demos and documentation.

Discussion (0)

pic
Editor guide