Tooltip - Pharen

Use Tooltip to explain an action or value on hover and keyboard focus. This page covers every Vue component exported by the public module.

Install the package and import its styles once. See Installation for the complete setup.

Import

import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@pharen/ui';

Example

<script setup lang="ts">
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@pharen/ui';
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child><Button variant="outline">Hover or focus</Button></TooltipTrigger>
      <TooltipContent>Open workspace settings</TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

Exports

Export	Purpose
`Tooltip`	Exported Vue component from this module.
`TooltipProvider`	Exported Vue component from this module.
`TooltipTrigger`	Opens or activates the component.
`TooltipContent`	Contains the visible content.

Source

Open the source on GitHub