Tooltip

要素にマウスオーバーすると情報が表示されるポップアップ。

使用法

ツールチップのデフォルトスロットにあるButtonまたはその他のコンポーネントを使用します。

<template>
  <UTooltip text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Reka UIのTooltipProviderコンポーネントを使用するAppコンポーネントでアプリをラップしてください。

Tooltipをグローバルに設定する方法は、Appコンポーネントtooltipプロパティを確認できます。

Text

textプロパティを使用して、Tooltipの内容を設定します。

text

<template>
  <UTooltip text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Kbds

kbdsプロパティを使用して、KbdコンポーネントをTooltipでレンダリングします。

<template>
  <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

macOSでは⌘、その他のプラットフォームではCtrlと表示されるmetaのような特別なキーを使用できます。

Delay

delay-durationプロパティを使用して、Tooltipが表示される前の遅延を変更します。例えば、0に設定することで、ツールチップを即座に表示させることができます。

delayDuration

<template>
  <UTooltip :delay-duration="0" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

これはAppコンポーネントのtooltip.delayDurationオプションでグローバルに設定できます。

コンテンツ

contentプロパティを使用して、alignやsideなど、Tooltipコンテンツのレンダリング方法を制御します。

これは、Appコンポーネントのtooltip.contentオプションでグローバルに設定できます。

content.align

content.side

content.sideOffset

<template>
  <UTooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="Open on GitHub"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

Arrow

arrowプロパティを使用して、ツールチップに矢印を表示します。

<template>
  <UTooltip arrow text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

無効

ツールチップを無効にするには、disabledプロパティを使用します。

disabled

<template>
  <UTooltip disabled text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

例

Controlオープンステート

オープン状態はdefault-openプロパティまたはv-model:openディレクティブを使用して制御できます。

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UTooltip v-model:open="open" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UTooltip v-model:open="open" text="Open on GitHub">
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>

この例では、defineShortcutsを活用して、kbd{value="O"}を押してツールチップを切り替えることができます。

次のカーソルで

referenceプロパティを使用して、要素にカーソルを合わせるとツールチップをカーソルに追従させることができます。

Hover me

<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <UTooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev: PointerEvent) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </UTooltip>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const open = ref(false)
const anchor = ref({ x: 0, y: 0 })

const reference = computed(() => ({
  getBoundingClientRect: () =>
    ({
      width: 0,
      height: 0,
      left: anchor.value.x,
      right: anchor.value.x,
      top: anchor.value.y,
      bottom: anchor.value.y,
      ...anchor.value
    } as DOMRect)
}))
</script>

<template>
  <UTooltip
    :open="open"
    :reference="reference"
    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
  >
    <div
      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
      @pointerenter="open = true"
      @pointerleave="open = false"
      @pointermove="(ev: PointerEvent) => {
        anchor.x = ev.clientX
        anchor.y = ev.clientY
      }"
    >
      Hover me
    </div>

    <template #content>
      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
    </template>
  </UTooltip>
</template>

API

Props

Prop	Default	Type
`text`		`string` The text content of the tooltip.
`kbds`		`(string \| undefined)[] \| KbdProps[]` The keyboard keys to display in the tooltip.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }`	`TooltipContentProps & Partial<EmitsToProps<TooltipContentImplEmits>>` The content of the tooltip. Inherits from the `tooltip.content` of the component when not provided.
`arrow`	`false`	`boolean \| TooltipArrowProps` Display an arrow alongside the tooltip. `{ rounded: true }`
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the tooltip in a portal.
`reference`		`Element \| VirtualElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
`defaultOpen`		`boolean` The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the tooltip.
`delayDuration`	`700`	`number` Override the duration given to the `Provider` to customise the open delay for a specific tooltip.
`disableHoverableContent`		`boolean` Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
`disableClosingTrigger`	`false`	`boolean` When `true`, clicking on trigger will not close the content.
`disabled`	`false`	`boolean` When `true`, disable tooltip
`ignoreNonKeyboardFocus`	`false`	`boolean` Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
`ui`		`{ content?: SlotClass; arrow?: SlotClass; text?: SlotClass; kbds?: SlotClass; kbdsSize?: SlotClass; }`

スロット

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{ ui: object; }`

Emits

Event	Type
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    tooltip: {
      slots: {
        content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
        arrow: 'fill-bg stroke-default',
        text: 'truncate',
        kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
        kbdsSize: 'sm'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        tooltip: {
          slots: {
            content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_var(--ease-out)] data-[state=closed]:animate-[scale-out_100ms_var(--ease-out)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
            arrow: 'fill-bg stroke-default',
            text: 'truncate',
            kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
            kbdsSize: 'sm'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Toast

A succinct message to provide information or feedback to the user.

AuthForm

A customizable Form to create login, register or password reset forms.