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.

View code

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

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

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

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