Tooltip

Directive for add tooltip to element.

Usage

Simple Usage

Hover Me preview

<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

<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

<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

<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

<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>

Long Hover

Special for .hover, it's have additional modifier .long which enable Long Hover mode. Duration can be change using data-tooltip-long attribute, default is 500 (ms).

preview

<template>
  <p-button v-p-tooltip.hover title="Hover">Hover</p-button>
  <p-button v-p-tooltip.hover.long title="Hover + Long">Long Hover</p-button>
  <p-button v-p-tooltip.hover.long title="Hover + Long + Duration" data-tooltip-long="1500">Super Long Hover</p-button>
</template>

Manual Trigger

If you prefer to trigger manually, add modifiers .manual and combine it with some ref.

Show Tooltippreview

<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

<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
long	Enable long hover mode

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

See Also

• Popover