Phi / Tooltip

<script setup lang="ts">
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <TooltipProvider>
    <Tooltip as-child content="Add new item">
      <Button shape="square" :icon="PhPlus" aria-label="Add new item" />
    </Tooltip>
  </TooltipProvider>
</template>

Installation

Barrel

import { Tooltip, TooltipProvider } from "@dicehub/phi";

Granular

import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";

Usage

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Tooltip } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <Tooltip as-child content="Tooltip text">
    <Button>Hover me</Button>
  </Tooltip>
</template>

For delay grouping across multiple tooltips, see TooltipProvider.

Examples

A concise tooltip for labeling an icon-only control.

<script setup lang="ts">
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <TooltipProvider>
    <Tooltip as-child content="Add">
      <Button shape="square" :icon="PhPlus" aria-label="Add" />
    </Tooltip>
  </TooltipProvider>
</template>

Multiple Tooltips

Wrap nearby tooltips in TooltipProvider to group open delay behavior.

<script setup lang="ts">
import { PhPlus, PhTranslate } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <TooltipProvider>
    <div class="flex gap-2">
      <Tooltip as-child content="Add">
        <Button shape="square" :icon="PhPlus" aria-label="Add" />
      </Tooltip>
      <Tooltip as-child content="Change language">
        <Button shape="square" :icon="PhTranslate" aria-label="Change language" />
      </Tooltip>
    </div>
  </TooltipProvider>
</template>

Long Content / Overflow

Long tooltip content wraps within the available viewport width.

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";

const longContent = "Long tooltip text that wraps within the available viewport width.";
</script>

<template>
  <TooltipProvider>
    <div class="flex w-full justify-between gap-3">
      <Tooltip as-child :content="longContent" side="bottom">
        <Button variant="secondary">Near left edge</Button>
      </Tooltip>
      <Tooltip as-child :content="longContent" side="bottom">
        <Button variant="secondary">Centered</Button>
      </Tooltip>
      <Tooltip as-child :content="longContent" side="bottom">
        <Button variant="secondary">Near right edge</Button>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>

Delay Control

Use delay and closeDelay to tune hover and focus timing.

<script setup lang="ts">
import { Button } from "@dicehub/phi/components/button";
import { Tooltip, TooltipProvider } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <TooltipProvider>
    <div class="flex flex-wrap gap-4">
      <Tooltip as-child content="Opens after 1 second" :delay="1000">
        <Button variant="secondary">1s open delay</Button>
      </Tooltip>
      <Tooltip as-child content="Stays open 500ms after leaving" :close-delay="500">
        <Button variant="secondary">500ms close delay</Button>
      </Tooltip>
    </div>
  </TooltipProvider>
</template>

Custom Trigger

Without asChild, Tooltip renders an internal trigger button and applies className to it. The trigger inherits line height so nested Text retains its normal height.

<script setup lang="ts">
import { PhInfo } from "@phosphor-icons/vue";
import { Text } from "@dicehub/phi/components/text";
import { Tooltip } from "@dicehub/phi/components/tooltip";
</script>

<template>
  <Tooltip content="Click to learn more" class-name="help-trigger">
    <PhInfo aria-hidden="true" />
    <span>Help</span>
  </Tooltip>
  <div style="line-height: 1.75rem">
    <Tooltip content="Project environments and deployment settings">
      <Text truncate style="max-width: 8rem">Project environments and deployment settings</Text>
    </Tooltip>
  </div>
</template>

API Reference

The root convenience component. It renders the trigger and tooltip content.

Prop / Event	Type	Default	Description
`content`	`string \| number \| null`	`-`	Text shown inside the tooltip. Use the content slot for custom content.
`asChild`	`boolean`	`false`	Render the slotted element as the trigger. In templates, use as-child.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the trigger.
`delay`	`number`	`600`	How long to wait before opening, in milliseconds.
`closeDelay`	`number`	`0`	How long to wait before closing, in milliseconds.
`container`	`string \| HTMLElement`	`"body"`	Teleport target for the portalled content.
`className`	`string`	`-`	Additional classes for the trigger.
`contentClassName`	`string`	`-`	Additional classes for the tooltip popup.
`v-model:open`	`boolean`	`-`	Vue controlled open state.
`@open-change`	`(details: TooltipOpenChangeDetails) => void`	`-`	Emitted whenever the tooltip opens or closes.
`positioning`	`TooltipRootProps['positioning']`	`-`	Advanced Ark positioning options.

Groups nearby tooltips so switching between them can skip the open delay.

Prop / Event	Type	Default	Description
`delay`	`number`	`600`	Default open delay for tooltips inside the provider.
`closeDelay`	`number`	`0`	Default close delay for tooltips inside the provider.
`timeout`	`number`	`400`	Grace period during which a just-closed tooltip causes the next tooltip to open instantly.