Tooltip

A popup that reveals information when hovering over an element.

Usage

Use a Button or any other component in the default slot of the Tooltip.

<template>
  <PTooltip text="Open on GitHub">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

Make sure to wrap your app with the App component which uses the ATooltipProvider component from Akar.

You can check the App component tooltip prop to see how to configure the Tooltip globally.

Text

Use the text prop to set the content of the Tooltip.

text

<template>
  <PTooltip text="Open on GitHub">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

Kbds

Use the kbds prop to render Kbd components in the Tooltip.

<template>
  <PTooltip text="Open on GitHub" :kbds="['meta', 'G']">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

You can use special keys like meta that displays as ⌘ on macOS and Ctrl on other platforms.

Delay

Use the delay-duration prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to 0.

delayDuration

<template>
  <PTooltip :delay-duration="0" text="Open on GitHub">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

This can be configured globally through the tooltip.delayDuration option in the App component.

Content

Use the content prop to control how the Tooltip content is rendered, like its align or side for example.

content.align

content.side

content.sideOffset

<template>
  <PTooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="Open on GitHub"
  >
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

Arrow

Use the arrow prop to display an arrow on the Tooltip.

<template>
  <PTooltip arrow text="Open on GitHub">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

Disabled

Use the disabled prop to disable the Tooltip.

disabled

<template>
  <PTooltip disabled text="Open on GitHub">
    <PButton label="Open" color="neutral" variant="subtle" />
  </PTooltip>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
import { defineShortcuts } from '#imports';
import { ref } from 'vue';

const open = ref(false);

defineShortcuts({
  o: () => {
    open.value = !open.value;
  },
});
</script>

<template>
  <PTooltip
    v-model:open="open"
    text="Open on GitHub"
  >
    <PButton
      label="Open"
      color="neutral"
      variant="subtle"
    />
  </PTooltip>
</template>

In this example, leveraging defineShortcuts, you can toggle the Tooltip by pressing O.

With following cursor

You can make the Tooltip follow the cursor when hovering over an element using the reference prop:

Hover me

<script setup lang="ts">
import { computed, ref } from 'vue';

const open = ref(false);
const anchor = ref({ x: 0, y: 0 });

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value,
    } as DOMRect),
}));
</script>

<template>
  <PTooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="border-border-accented text-sm border rounded-md border-dashed flex w-72 aspect-video items-center justify-center"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </PTooltip>
</template>

API

Props

Prop	Default	Type
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the tooltip in a portal.
`delayDuration`	`300`	`number` Override the duration given to the `Provider` to customise the open delay for a specific tooltip.
`text`		`string` The text content of the tooltip.
`kbds`		`string[] \| PKbdProps[]` The keyboard keys to display in the tooltip.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }`	`ATooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>` The content of the tooltip.
`arrow`	`false`	`boolean \| ATooltipArrowProps` Display an arrow alongside the tooltip.
`reference`		`Element \| VirtualElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
`defaultOpen`		`boolean` The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the tooltip.
`disableHoverableContent`		`boolean` Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
`disableClosingTrigger`	`false`	`boolean` When `true`, clicking on trigger will not close the content.
`disabled`	`false`	`boolean` When `true`, disable tooltip
`ignoreNonKeyboardFocus`	`false`	`boolean` Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
`pohon`		`{ content?: ClassValue; arrow?: ClassValue; text?: ClassValue; kbds?: ClassValue; kbdsSize?: ClassValue; }`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{ pohon: object; }`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PTooltip. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    tooltip: {
      slots: {
        content: '',
        arrow: '',
        text: '',
        kbds: '',
        kbdsSize: ''
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    tooltip: {
      slots: {
        content: '',
        arrow: '',
        text: '',
        kbds: '',
        kbdsSize: ''
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

Toast

A succinct message to provide information or feedback to the user.

ContentNavigation

An accordion-style navigation component for organizing page links.