PersonaTooltip
Directive for add tooltip to element.
Usage
Simple Usage
Hover Me preview
vue
<template>
<span v-p-tooltip title="Hello I'm Tooltip">
Hover Me
</span>
</template>
<script setup>
import { vPTooltip } from '@privyid/persona/directive'
</script>With Markdown
Hover Me preview
vue
<template>
<span v-p-tooltip title="**Hello** _I'm_ ~~Reyhan~~ Tooltip">
Hover Me
</span>
</template>
<script setup>
import { vPTooltip } from '@privyid/persona/directive'
</script>Color
You can change tooltip color using modifiers .black, .white, default is black
preview
Placement
You can change tooltip position using modifiers .top, .left, .right, and .bottom. default is top.
preview
vue
<template>
<p-button v-p-tooltip.top title="Top">Top</p-button>
<p-button v-p-tooltip.left title="Left">Left</p-button>
<p-button v-p-tooltip.right title="Right">Right</p-button>
<p-button v-p-tooltip.bottom title="Bottom">Bottom</p-button>
</template>Placement Align
You can combine with modifier .start and .end to set tooltip align.
preview
vue
<template>
<p-button v-p-tooltip.bottom title="Bottom">Bottom</p-button>
<p-button v-p-tooltip.bottom.start title="Bottom Start">Start</p-button>
<p-button v-p-tooltip.bottom.end title="Bottom End">End</p-button>
</template>Trigger
Tooltips can be triggered (opened/closed) using modifiers .click, .hover and .focus. The default trigger is hover + focus.
preview
vue
<template>
<p-button v-p-tooltip title="Hover + Focus">Default</p-button>
<p-button v-p-tooltip.click title="Click">Click</p-button>
<p-button v-p-tooltip.hover title="Hover">Hover</p-button>
<p-button v-p-tooltip.focus title="Focus">Focus</p-button>
</template>Manual Trigger
If you prefer to trigger manually, add modifiers .manual and combine it with some ref.
preview
vue
<template>
<p-button v-p-tooltip.manual="show" title="Hello I'm Tooltip">
Lorem Ipsum
</p-button>
<p-checkbox v-model="show">Show Tooltip</p-checkbox>
</template>
<script lang="ts" setup>
const show = ref(false)
</script>Programmatic Trigger
Alternatively, you can manual trigger tooltip using showTooltip, hideToolip, or toggleTooltip function.
Lorem Ipsum preview
vue
<template>
<span v-p-tooltip.manual title="Hello I'm Tooltip" id="tooltip-manual">
Lorem Ipsum
</span>
<p-button @click="showTooltip('#tooltip-manual')">Show</p-button>
<p-button @click="hideTooltip('#tooltip-manual')">Hide</p-button>
<p-button @click="toggleTooltip('#tooltip-manual')">Toggle</p-button>
</template>
<script lang="ts" setup>
import {
showTooltip,
hideTooltip,
toggleTooltip,
} from '@privyid/persona/core'
</script>API
Modifiers
| Modifiers | Description |
|---|---|
black | Enable color black |
white | Enable color white |
top | Set placement to top |
left | Set placement to left |
right | Set placement to right |
bottom | Set placement to bottom |
start | Set placement align to start |
end | Set placement align to end |
hover | Enable hover trigger |
click | Enable click trigger |
focus | Enable focus trigger |
Events
| Name | Arguments | Description |
|---|---|---|
tooltip:show | Native DOM Event object | Event when tooltip will be show |
tooltip:hide | Native DOM Event object | Event when tooltip will be hide |