Tooltip

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

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

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

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

<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

Slots

Slot Type

Emits

Event Type

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.

DashboardGroup

A fixed layout component that provides context for dashboard components with sidebar state management and persistence.