Usage

<script setup lang="ts">
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from "wedges-vue";
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>Hover</TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

API Reference

Tooltip

Use this component for a quick usage

Prop	Type	Default
align	'start' | 'center' | 'end'
alignOffset	number
ariaLabel	string
arrowPadding	number
as	AsTag | Component	'div'
asChild	boolean	false
avoidCollisions	boolean	false
collisionBoundary	Element | (Element | null)[] | null
collisionPadding	number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>
color	'primary' | 'secondary' | 'soft'	'primary'
content	string
defaultOpen	boolean	false
delayDuration	number	200
disableClosingTrigger	boolean	false
disabled	boolean	false
disableHoverableContent	boolean	false
hideWhenDetached	boolean	false
ignoreNonKeyboardFocus	boolean	false
open	boolean	false
side	'top' | 'right' | 'bottom' | 'left'
sideOffset	number
sticky	'partial' | 'always'

TooltipProvider

Extends the Radix Tooltip Provider primitive with custom configuration.

TooltipRoot

Extends the Radix Tooltip Root primitive with custom configuration.

TooltipTrigger

Extends the Radix Tooltip Trigger primitive with custom styling.

TooltipArrow

Extends the Radix Tooltip Arrow primitive with custom styling.

TooltipContent

Extends the Radix Tooltip Content primitive with custom styling.

TooltipPortal

Exports the Radix Tooltip Portal primitive.

Examples

The example below demonstrates different color and size variations of the Tooltip component.