Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Prop	Default	Type	Description
`content`	-	`string`	Set the tooltip content.
`defaultOpen`	`false`	`boolean`	The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
`delayDuration`	-	`number`	Override the duration given to the Provider to customize the open delay for a specific tooltip.
`disableClosingTrigger`	-	`boolean`	When true, clicking on trigger will not close the content.
`disabled`	-	`boolean`	When true, disable tooltip a
`disableHoverableContent`	-	`boolean`	Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
`ignoreNonKeyboardFocus`	-	`boolean`	Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
`open`	`false`	`boolean`	The controlled open state of the tooltip.

Color

Prop	Default	Type	Description
`tooltip`	`black`	`string`	Set the tooltip color.

Preview

Code

Size

Prop	Default	Type	Description
`size`	`xs`	`string`	Set the tooltip general size.

Preview

Code

Provider

Configure the tooltip provider by using the _tooltipProvider prop.

Prop	Default	Type	Description
`delayDuration`	`700`	`number`	The duration from when the pointer enters the trigger until the tooltip gets opened.
`disableClosingTrigger`	-	`boolean`	When `true`, clicking on trigger will not close the content.
`disabled`	-	`boolean`	When `true`, disable tooltip.
`disableHoverableContent`	`false`	`boolean`	When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
`ignoreNonKeyboardFocus`	`false`	`boolean`	Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
`skipDelayDuration`	`300`	`number`	How much time a user has to enter another trigger without incurring a delay again.

Content

Configure the tooltip content using the _tooltipContent prop.

Prop	Default	Type	Description
`align`	`center`	`start` `end` `center`	The preferred alignment against the trigger. May change when collisions occur.
`alignOffset`	-	`number`	An offset in pixels from the start or end alignment options.
`side`	`top`	`top` `right` `bottom` `left`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`sideOffset`	-	`number`	The distance in pixels from the trigger.

Slots

Name	Props	Description
`default`	-	The trigger slot.
`content`	-	The content slot.

Preview

Code

Presets

shortcuts/tooltip.ts

import type { RuleContext } from '@unocss/core'
import type { Theme } from '@unocss/preset-uno'
import { parseColor } from '@unocss/preset-mini/utils'

type TooltipPrefix = 'tooltip'

export const staticTooltip: Record<`${TooltipPrefix}-${string}`, string> = {
  'tooltip-content': 'z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',

  'tooltip-white': 'border border-base bg-popover text-popover',
  'tooltip-black': 'border border-foreground bg-popover-foreground text-popover-foreground',
}

export const dynamicTooltip = [
  [/^tooltip-(.*)$/, ([, c]: string[], { theme }: RuleContext<Theme>) => {
    const color = parseColor(c, theme)
    if ((color?.cssColor?.type === 'rgb' || color?.cssColor?.type === 'rgba') && color.cssColor.components)
      return `bg-${c}-100 border-${c}-50 text-${c}-800 dark:bg-${c}-800 dark:border-${c}-800 dark:text-${c}-100`
  }],
]

export const tooltip = [
  ...dynamicTooltip,
  staticTooltip,
]

Props

types/tooltip.ts

import type { TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'
import type { NButtonProps } from './button'

interface BaseExtensions {
  class?: HTMLAttributes['class']
  size?: HTMLAttributes['class']
}

type TriggerExtensions = NButtonProps & TooltipTriggerProps
type ContentExtensions = BaseExtensions & TooltipContentProps

export interface NTooltipProps extends BaseExtensions, TooltipRootProps {
  /**
   * Add a content of the tooltip.
   */
  content?: string
  /**
   * Allows you to add `UnaUI` tooltip preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
   * @example
   * tooltip="green"
   */
  tooltip?: HTMLAttributes['class']

  // subcomponents
  _tooltipProvider?: Partial<NTooltipProviderProps>
  _tooltipTrigger?: Partial<NTooltipTriggerProps>
  _tooltipContent?: Partial<NTooltipContentProps>

  una?: NTooltipUnaProps
}

export interface NTooltipProviderProps extends TooltipProviderProps {
}

export interface NTooltipRootProps extends TooltipRootProps {
}

export interface NTooltipTriggerProps extends TriggerExtensions {
}

export interface NTooltipContentProps extends ContentExtensions {
  /**
   * Allows you to add `UnaUI` tooltip preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
   * @example
   * tooltip="green"
   */
  tooltip?: HTMLAttributes['class']

  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/tooltip.ts
   */
  una?: NTooltipUnaProps['tooltipContent']
}

interface NTooltipUnaProps {
  /** CSS class for the tooltip content */
  tooltipContent?: HTMLAttributes['class']
}

Components

Tooltip.vue

TooltipProvider.vue

TooltipRoot.vue

TooltipContent.vue

TooltipTrigger.vue

<script setup lang="ts">
import type { TooltipRootEmits } from 'radix-vue'
import type { NTooltipProps } from '../../../types'
import { reactivePick } from '@vueuse/core'
import { useForwardPropsEmits } from 'radix-vue'
import TooltipContent from './TooltipContent.vue'
import TooltipProvider from './TooltipProvider.vue'
import TooltipRoot from './TooltipRoot.vue'
import TooltipTrigger from './TooltipTrigger.vue'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<NTooltipProps>()
const emits = defineEmits<TooltipRootEmits>()
const rootProps = reactivePick(props, [
  'defaultOpen',
  'delayDuration',
  'disableClosingTrigger',
  'disabled',
  'disableHoverableContent',
  'ignoreNonKeyboardFocus',
  'open',
])
const forwarded = useForwardPropsEmits(rootProps, emits)
</script>

<template>
  <TooltipProvider
    v-bind="_tooltipProvider"
  >
    <TooltipRoot
      v-bind="forwarded"
    >
      <TooltipTrigger
        as-child
        v-bind="_tooltipTrigger"
      >
        <slot />
      </TooltipTrigger>

      <TooltipContent
        v-if="$slots.content || content"
        v-bind="_tooltipContent"
        :size
        :tooltip
        :disabled
        :una="una?.tooltipContent"
      >
        <slot name="content">
          {{ content }}
        </slot>
      </TooltipContent>
    </TooltipRoot>
  </TooltipProvider>
</template>

Edit this page on GitHub

Toggle

A two-state button that can be either on or off.

On This Page

Star on GitHub Create Issues Release Notes Become a Sponsor Edit this page on GitHub

Tooltip

Examples

Basic

Color

Size

Provider

Content

Slots

Presets

Props

Components