Tooltip

Una ventana emergente que revela información al pasar el cursor sobre un elemento.

xph0000xUso

Utilice un Button o cualquier otro componente en la ranura predeterminada de la información sobre herramientas.

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

Asegúrese de envolver su aplicación con el componente App que utiliza el componente TooltipProvider de Reka UI.

Puede consultar el componente App prop tooltip para ver cómo configurar la información sobre herramientas a nivel mundial.

Text (Edición española)

Utilice el prop text para establecer el contenido de la información sobre herramientas.

text

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

kbds (Edición española)

Utilice el prop kbds para representar los componentes Kbd en la información sobre herramientas.

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

Puedes usar teclas especiales como meta que se muestra como ⌘ en macOS y Ctrl en otras plataformas.

Delay (Edición española)

Utilice el prop delay-duration para cambiar el retardo antes de que aparezca la información sobre herramientas. Por ejemplo, puede hacer que aparezca instantáneamente configurándolo en 0.

delayDuration

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

Esto se puede configurar globalmente a través de la opción tooltip.delayDuration en el componente App.

Contenido

Utilice el prop content para controlar cómo se representa el contenido de la información de herramientas, como su align o side, por ejemplo.

Esto se puede configurar globalmente a través de la opción tooltip.content en el componente 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>

Flecha

Utilice el accesorio arrow para mostrar una flecha en la información sobre herramientas.

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

Desactivado

Utilice el prop disabled para desactivar la información sobre herramientas.

disabled

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

Ejemplos

Control estado abierto

Puede controlar el estado abierto usando la prop default-open o la directiva 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>

En este ejemplo, aprovechando defineShortcuts, puede alternar la información sobre herramientas presionando: kbd{value="O"}.

Con el cursor siguiente

Puede hacer que la información sobre herramientas siga el cursor al pasar el cursor sobre un elemento utilizando 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 (accesorios)

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 (Edición española)

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

Emisiones

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

Temas

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 (Edición española)

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.