Radix Vue

外観

ツールチップ ​

要素がキーボードフォーカスを受け取るか、マウスがその要素の上にホバーしたときに、その要素に関する情報を表示するポップアップです。
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
          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"
        >
          Add to library
          <TooltipArrow
            class="fill-white"
            :width="8"
          />
        </TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </TooltipProvider>
</template>

機能 ​

  • 表示遅延をグローバルに制御するためのプロバイダー。
  • トリガーがフォーカスされたか、ホバーされたときに開きます。
  • トリガーがアクティブになったか、Escapeキーを押すと閉じます。
  • カスタムタイミングをサポートします。

構成 ​

すべての部品をインポートして組み立てる。

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

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

APIリファレンス ​

プロバイダー ​

ツールチップにグローバルな機能を提供するためにアプリケーションをラップします。

プロップデフォルトタイプ
delayDuration
700
数値

ポインターがトリガーに入った時点からツールチップが開くまでの期間。

disableClosingTrigger
ブール値

trueの場合、トリガーをクリックしてもコンテンツは閉じません。

disabled
ブール値

trueの場合、ツールチップを無効にします。

disableHoverableContent
false
ブール値

trueの場合、コンテンツにホバーしようとすると、ポインターがトリガーから離れるとツールチップが閉じます。

ignoreNonKeyboardFocus
false
ブール値

:focus-visibleセレクターと照合することで、キーボードからフォーカスが来なかった場合にツールチップが開くのを防ぎます。ブラウザタブを切り替える場合やダイアログを閉じる場合に開くのを避けたい場合に便利です。

skipDelayDuration
300
数値

再度遅延が発生することなく、ユーザーが別のトリガーを入力できる時間。

ルート ​

ツールチップのすべての部品を含みます。

プロップデフォルトタイプ
defaultOpen
false
ブール値

最初にレンダリングされたときのツールチップの開状態。開状態を制御する必要がない場合に使用します。

delayDuration
数値

Providerに指定された期間をオーバーライドして、特定のツールチップの開遅延をカスタマイズします。

disableClosingTrigger
ブール値

trueの場合、トリガーをクリックしてもコンテンツは閉じません。

disabled
ブール値

trueの場合、ツールチップを無効にします。

disableHoverableContent
ブール値

ホバー時にTooltip.Contentが開いたままになるのを防ぎます。これを無効にすると、アクセシビリティに影響します。Tooltip.Providerから継承します。

ignoreNonKeyboardFocus
ブール値

:focus-visibleセレクターと照合することで、キーボードからフォーカスが来なかった場合にツールチップが開くのを防ぎます。ブラウザタブを切り替える場合やダイアログを閉じる場合に開くのを避けたい場合に便利です。

open
ブール値

ツールチップの制御された開状態。

Emitペイロード
update:open
[value: boolean]

ツールチップの開状態が変更されたときに呼び出されるイベントハンドラー。

スロット (デフォルト)ペイロード
open
ブール値

現在の開状態

トリガー ​

ツールチップを切り替えるボタン。デフォルトでは、TooltipContentはトリガーに対して自身を配置します。

プロップデフォルトタイプ
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildでオーバーライドできます。

asChild
ブール値

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

データ属性値
[data-state]"closed" | "delayed-open" | "instant-open"

ポータル ​

使用すると、コンテンツ部分をbodyにポータルします。

プロップデフォルトタイプ
disabled
ブール値

テレポートを無効にして、コンポーネントをインラインでレンダリングします。

reference

forceMount
ブール値

より多くの制御が必要な場合に強制的にマウントするために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。

to
文字列 | HTMLElement

Vueネイティブのテレポートコンポーネントのプロップ:to

reference

コンテンツ ​

ツールチップが開いているときにポップアップ表示されるコンポーネント。

プロップデフォルトタイプ
align
'start' | 'center' | 'end'

トリガーに対する優先される位置合わせ。衝突が発生すると変更される場合があります。

alignOffset
数値

startまたはendの位置合わせオプションからのピクセル単位のオフセット。

ariaLabel
文字列

デフォルトでは、スクリーンリーダーはコンポーネント内のコンテンツを読み上げます。これが十分に記述的でない場合、または読み上げることができないコンテンツがある場合は、より記述的なラベルとしてaria-labelを使用します。

arrowPadding
数値

矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、これにより角がオーバーフローするのを防ぎます。

as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildでオーバーライドできます。

asChild
ブール値

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

avoidCollisions
ブール値

trueの場合、境界線の端との衝突を防ぐために、sideとalignの設定をオーバーライドします。

collisionBoundary
要素 | (要素 | null)[] | null

衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を指定できます。

collisionPadding
数値 | Partial<Record<'top' | 'right' | 'bottom' | 'left', 数値>>

境界線の端から衝突検出が発生する距離（ピクセル単位）。数値（すべての辺で同じ）、または部分的なパディングオブジェクト（例：{ top: 20, left: 20 }）を受け入れます。

forceMount
ブール値

より多くの制御が必要な場合に強制的にマウントするために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。

hideWhenDetached
ブール値

トリガーが完全に隠されたときにコンテンツを隠すかどうか。

side
'top'
'top' | 'right' | 'bottom' | 'left'

開いているときにレンダリングするトリガーの優先される辺。衝突が発生し、avoidCollisionsが有効になっている場合、反転されます。

sideOffset
数値

トリガーからの距離（ピクセル単位）。

sticky
'partial' | 'always'

位置合わせ軸のスティッキーな動作。partialは、トリガーが境界線内に少なくとも部分的に含まれている限り、コンテンツを境界線内に維持しますが、"always"は、トリガーの位置に関係なく、コンテンツを境界線内に維持します。

Emitペイロード
escapeKeyDown
[イベント: KeyboardEvent]

開いた後にフォーカスが破壊的なアクションに移動したときに呼び出されるイベントハンドラー。event.preventDefaultを呼び出すことで防ぐことができます。

pointerDownOutside
[イベント: Event]

コンポーネントの境界外でポインターイベントが発生したときに呼び出されるイベントハンドラー。event.preventDefaultを呼び出すことで防ぐことができます。

データ属性値
[data-state]"closed" | "delayed-open" | "instant-open"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS変数説明
--radix-tooltip-content-transform-origin
コンテンツと矢印の位置/オフセットから計算されたtransform-origin。
--radix-tooltip-content-available-width
トリガーと境界線の端の間の残りの幅。
--radix-tooltip-content-available-height
トリガーと境界線の端の間の残りの高さ。
--radix-tooltip-trigger-width
トリガーの幅。
--radix-tooltip-trigger-height
トリガーの高さ。

矢印 ​

ツールチップと一緒にレンダリングするためのオプションの矢印要素。これは、トリガーとTooltipContentを視覚的にリンクするのに役立ちます。TooltipContent内でレンダリングする必要があります。

プロップデフォルトタイプ
as
'svg'
AsTag | コンポーネント

このコンポーネントがレンダリングする要素またはコンポーネント。asChildでオーバーライドできます。

asChild
ブール値

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、それらのプロップと動作をマージします。

詳細については、コンポジションガイドを参照してください。

height
5
数値

矢印の高さ（ピクセル単位）。

width
10
数値

矢印の幅（ピクセル単位）。

例 ​

グローバルに設定 ​

Providerを使用して、delayDurationとskipDelayDurationをグローバルに制御します。

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>

即時に表示 ​

delayDurationプロップを使用して、ツールチップが開くまでの時間を制御します。

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

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

無効なボタンからのツールチップの表示 ​

無効なボタンはイベントを発生させないので、

  • Triggerをspanとしてレンダリングします。
  • buttonに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>

コンテンツサイズを制限する ​

コンテンツの幅をトリガーの幅に合わせて制限したい場合もあります。また、ビューポートを超えないように高さを制限したい場合もあります。

これをサポートするために、--radix-tooltip-trigger-widthや--radix-tooltip-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。これらを使用して、コンテンツの寸法を制限します。

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);
}

起点認識アニメーション ​

CSSカスタムプロパティ--radix-tooltip-content-transform-originを公開しています。これを使用して、side、sideOffset、align、alignOffset、および衝突に基づいて計算された起点からコンテンツをアニメーション化します。

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);
  }
}

衝突認識アニメーション ​

data-side属性とdata-align属性を公開しています。これらの値は、衝突を反映してランタイム時に変化します。これらを使用して、衝突と方向を認識するアニメーションを作成してください。

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);
  }
}

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
ツールチップを開閉します（遅延なし）。
Space
開いている場合は、ツールチップを閉じます（遅延なし）。
Enter
開いている場合は、ツールチップを閉じます（遅延なし）。
Escape
開いている場合は、ツールチップを閉じます（遅延なし）。

カスタムAPI ​

プリミティブな部分を独自のコンポーネントに抽象化することで、独自のAPIを作成してください。

部分の抽象化とcontentプロパティの導入 ​

この例では、Tooltipのすべての部分を抽象化し、新しいcontentプロパティを導入しています。

使用方法 ​

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

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

実装 ​

asChildプロパティを使用して、トリガー部分をスロット可能な領域に変換します。これにより、トリガーが渡された子要素に置き換えられます。

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>