Skip to content

Tooltip

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>

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

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

ModifiersDescription
blackEnable color black
whiteEnable color white
topSet placement to top
leftSet placement to left
rightSet placement to right
bottomSet placement to bottom
startSet placement align to start
endSet placement align to end
hoverEnable hover trigger
clickEnable click trigger
focusEnable focus trigger
longEnable long hover mode

Events

NameArgumentsDescription
tooltip:showNative DOM Event objectEvent when tooltip will be show
tooltip:hideNative DOM Event objectEvent when tooltip will be hide

See Also

Released under the MIT License.