Vue Interface

Appearance

Tooltip ​

The tooltip component provides flexible tooltips with customizable placement options.

Installation ​

bash
pnpm i @vue-interface/tooltip
bash
yarn add @vue-interface/tooltip
bash
npm i @vue-interface/tooltip
bash
bun i @vue-interface/tooltip

Basic Usage ​

Tooltips can be positioned at the top, bottom, left, or right of the target element.

TopBottomLeftRight
html
<a href="#" title="Top" data-tooltip-placement="top">Top</a>
<a href="#" title="Bottom" data-tooltip-placement="bottom">Bottom</a>
<a href="#" title="Left" data-tooltip-placement="left">Left</a>
<a href="#" title="Right" data-tooltip-placement="right">Right</a>

Dynamic Elements ​

Tooltips work with dynamically mounted and unmounted elements.

Show Code
html
<button @click="show = true">Mount Element</button>
<button v-if="show" title="Some Tooltip" @click="show = false">
    Click to Unmount
</button>

Via Directive ​

Use the v-tooltip directive for a more concise syntax.

Show Code
html
<button
    v-tooltip="{
        title: 'Top',
        placement: 'top'
    }">
    Top
</button>
<button
    v-tooltip="{
        title: 'Bottom',
        placement: 'bottom'
    }">
    Bottom
</button>
<button
    v-tooltip="{
        title: 'Left',
        placement: 'left'
    }">
    Left
</button>
<button v-tooltip="{
        title: 'Right',
        placement: 'right'
    }">
    Right
</button>