Tooltip

Tooltip directive provides advisory information for a component.

Directive

Tooltip is a Vue directive, so you need to import and register it to your application.

import { createApp } from 'vue';
import Tooltip from 'primevue/tooltip';

const app = createApp(App);
app.directive('tooltip', Tooltip);

Position

There are four choices to position the tooltip, default value is right and alternatives are top, bottom, left.

<template>
  <div class="card flex flex-wrap justify-center gap-2">
    <CInputText 
        v-tooltip="'Enter your username'" 
        placeholder="Right" 
    />
    <CInputText 
        v-tooltip.top="'Enter your username'" 
        placeholder="Top" 
    />
    <CInputText 
        v-tooltip.bottom="'Enter your username'" 
        placeholder="Bottom" 
    />
    <CInputText 
        v-tooltip.left="'Enter your username'" 
        placeholder="Left" 
    />
  </div>
</template>

Event

Event to display the tooltip is defined as a modifier, default event is hover.

<CInputText 
    v-tooltip.focus.top="'Enter your username'" 
    placeholder="Focus" 
/>

Auto Hide

Tooltip gets hidden when mouse leaves the target element by default, set autoHide to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.

<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <CInputText 
            v-tooltip.bottom="{ 
                value: 'Enter your username', 
                autoHide: false 
            }" 
            type="text" 
            placeholder="autoHide: false" 
        />
        <CInputText 
            v-tooltip.bottom="'Enter your username'" 
            type="text" 
            placeholder="autoHide: true" 
        />
    </div>
</template>

Delay

Delays to the enter and leave events are defined with showDelay and hideDelay options respectively.

<template>
    <div class="card flex flex-wrap justify-center">
        <CButton 
            v-tooltip="{ 
                value: 'Confirm to proceed', 
                showDelay: 1000, 
                hideDelay: 300 
            }" 
            label="Save" 
        />
    </div>
</template>