Radix Vue

Appearance

Tooltip ​

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
vue
<script setup lang="ts">
import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
import { Icon } from '@iconify/vue'
</script>

<template>
  <TooltipProvider>
    <TooltipRoot>
      <TooltipTrigger
        class="text-grass11 shadow-blackA7 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
      >
        <Icon icon="radix-icons:plus" />
      </TooltipTrigger>
      <TooltipPortal>
        <TooltipContent
          as-child
          class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-grass11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
          :side-offset="5"
        >
          <ul>
            Add to library
            <TooltipArrow class="fill-white" size="8" />
          </ul>
        </TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </TooltipProvider>
</template>

Features ​

  • Provider to control display delay globally.
  • Opens when the trigger is focused or hovered.
  • Closes when the trigger is activated or when pressing escape.
  • Supports custom timings.

Anatomy ​

Import all parts and piece them together.

vue
<script setup lang="ts">
import { TooltipArrow, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipProvider>
    <TooltipRoot>
      <TooltipTrigger />
      <Tooltip>
        <TooltipContent>
          <TooltipArrow />
        </TooltipContent>
      </Tooltip>
    </TooltipRoot>
  </TooltipProvider>
</template>

API Reference ​

Provider ​

Wraps your app to provide global functionality to your tooltips.

PropTypeDefault
delayDuration
number
700
skipDelayDuration
number
300
disableHoverableContent
boolean
disableClosingTrigger
boolean

Root ​

Contains all the parts of a tooltip.

PropTypeDefault
defaultOpen
boolean
open
boolean
delayDuration
number
700
disableHoverableContent
boolean
disableClosingTrigger
boolean
EmitType
@update:open
(value: boolean) => void

Trigger ​

The button that toggles the tooltip. By default, the TooltipContent will position itself against the trigger.

PropTypeDefault
as
string | Component
button
asChild
boolean
false
Data AttributeValue
[data-state]"closed" | "delayed-open" | "instant-open"

Portal ​

When used, portals the content part into the body.

PropTypeDefault
to
string | HTMLElement
body

Content ​

The component that pops out when the tooltip is open.

PropTypeDefault
ariaLabel
string
forceMount
boolean
side
enum
"top"
sideOffset
number
0
align
enum
"center"
alignOffset
number
0
avoidCollisions
boolean
true
collisionBoundary
Boundary
[]
collisionPadding
number | Padding
0
arrowPadding
number
0
sticky
enum
"partial"
hideWhenDetached
boolean
false
as
string | Component
div
asChild
boolean
false
EmitType
@escape-key-down
(event: KeyboardEvent) => void
@pointer-down-outside
(event: KeyboardEvent) => void
Data AttributeValue
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-tooltip-content-transform-origin
The transform-origin computed from the content and arrow positions/offsets
--radix-tooltip-content-available-width
The remaining width between the trigger and the boundary edge
--radix-tooltip-content-available-height
The remaining height between the trigger and the boundary edge
--radix-tooltip-trigger-width
The width of the trigger
--radix-tooltip-trigger-height
The height of the trigger

Arrow ​

An optional arrow element to render alongside the tooltip. This can be used to help visually link the trigger with the TooltipContent. Must be rendered inside TooltipContent.

PropTypeDefault
as
string | Component
svg
asChild
boolean
false
width
number
10
height
number
5

Examples ​

Configure globally ​

Use the Provider to control delayDuration and skipDelayDuration globally.

vue
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipProvider :delay-duration="800" :skip-delay-duration="500">
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
    <TooltipRoot>
      <TooltipTrigger>…</TooltipTrigger>
      <TooltipContent>…</TooltipContent>
    </TooltipRoot>
  </TooltipProvider>
</template>

Show instantly ​

Use the delayDuration prop to control the time it takes for the tooltip to open.

vue
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot :delay-duration="0">
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipContent>…</TooltipContent>
  </TooltipRoot>
</template>

Displaying a tooltip from a disabled button ​

Since disabled buttons don't fire events, you need to:

  • Render the Trigger as span.
  • Ensure the button has no pointerEvents.
vue
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger as-child>
      <span tabindex="0">
        <button disabled style="{ pointerEvents: 'none' }">…</button>
      </span>
    </TooltipTrigger>
    <TooltipContent>…</TooltipContent>
  </TooltipRoot>
</template>

Constrain the content size ​

You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

We expose several CSS custom properties such as --radix-tooltip-trigger-width and --radix-tooltip-content-available-height to support this. Use them to constrain the content dimensions.

vue
 <!-- index.vue -->
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipPortal>
      <TooltipContent class="TooltipContent" :side-offset="5">
        …
      </TooltipContent>
    </TooltipPortal>
  </TooltipRoot>
</template>
css
/* styles.css */
.TooltipContent {
  width: var(--radix-tooltip-trigger-width);
  max-height: var(--radix-tooltip-content-available-height);
}

Origin-aware animations ​

We expose a CSS custom property --radix-tooltip-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

vue
 <!-- index.vue -->
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipContent class="TooltipContent">
      …
    </TooltipContent>
  </TooltipRoot>
</template>
css
/* styles.css */
.TooltipContent {
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Collision-aware animations ​

We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

vue
 <!-- index.vue -->
<script setup>
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger>…</TooltipTrigger>
    <TooltipContent class="TooltipContent">
      …
    </TooltipContent>
  </TooltipRoot>
</template>
css
/* styles.css */
.TooltipContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.TooltipContent[data-side="top"] {
  animation-name: slideUp;
}
.TooltipContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Accessibility ​

Keyboard Interactions ​

KeyDescription
Tab
Opens/closes the tooltip without delay.
Space
If open, closes the tooltip without delay.
Enter
If open, closes the tooltip without delay.
Escape
If open, closes the tooltip without delay.

Custom APIs ​

Create your own API by abstracting the primitive parts into your own component.

Abstract parts and introduce a content prop ​

This example abstracts all of the Tooltip parts and introduces a new content prop.

Usage ​

vue
<script setup lang="ts">
import { Tooltip } from './your-tooltip'
</script>

<template>
  <Tooltip content="Tooltip content">
    <button>Tooltip trigger</button>
  </Tooltip>
</template>

Implementation ​

Use the asChild prop to convert the trigger part into a slottable area. It will replace the trigger with the child that gets passed to it.

vue
<!-- your-tooltip.vue  -->
<script setup lang="ts">
import { TooltipArrow, TooltipContent, TooltipRoot, type TooltipRootEmits, type TooltipRootProps, TooltipTrigger, useForwardPropsEmits } from 'radix-vue'

const props = defineProps<TooltipRootProps & { content?: string }>()
const emits = defineEmits<TooltipRootEmits>()

const forward = useForwardPropsEmits(props, emits)
</script>

<template>
  <TooltipRoot v-bind="forward">
    <TooltipTrigger as-child>
      <slot />
    </TooltipTrigger>
    <TooltipContent side="top" align="center">
      {{ content }}
      <TooltipArrow :width="11" :height="5" />
    </TooltipContent>
  </TooltipRoot>
</template>