Tooltip

Pop-up qui révèle des informations lorsque vous survolez un élément.

Utilisation

Utilisez un Button ou tout autre composant dans l'emplacement par défaut de l'info-bulle.

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

Assurez-vous d'envelopper votre application avec le composant App qui utilise le composant TooltipProvider de Reka UI.

Vous pouvez consulter le composant App prop tooltip pour voir comment configurer l'info-bulle globalement.

Texte écrit

Utilisez le prop text pour définir le contenu de l'info-bulle.

text

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

Kbds

Utilisez la prop kbds pour rendre les composants Kbd dans l'info-bulle.

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

Vous pouvez utiliser des touches spéciales comme meta qui s'affiche sous ⌘ sur macOS et Ctrl sur d'autres plates-formes.

délai

Utilisez la prop delay-duration pour modifier le délai avant que l'info-bulle n'apparaisse. Par exemple, vous pouvez la faire apparaître instantanément en la définissant sur 0.

delayDuration

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

Ceci peut être configuré globalement via l'option tooltip.delayDuration dans le composant App.

Contenu

Utilisez la prop content pour contrôler le rendu du contenu de l'infobulle, comme son align ou side par exemple.

Ceci peut être configuré globalement via l'option tooltip.content dans le composant App.

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>

flèche

Utilisez la prop arrow pour afficher une flèche dans l'info-bulle.

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

Désactivé

Utilisez la prop disabled pour désactiver l'info-bulle.

disabled

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

Exemples

Control état ouvert

Vous pouvez contrôler l'état ouvert en utilisant la prop default-open ou la directive 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>

Dans cet exemple, en utilisant defineShortcuts, vous pouvez basculer l'info-bulle en appuyant sur: kbd{value="O"}.

Avec le curseur suivant

Vous pouvez faire en sorte que l'info-bulle suive le curseur lorsque vous survolez un élément en utilisant la prop 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; }`

Slots

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

Emits

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

Thème

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 écrit

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.