Tooltip

Um popup que revela informações ao passar o mouse sobre um elemento.

Uso

Use a Button or any other component in the default slot of the Tooltip.

<template>
  <NTooltip text="Open on GitHub">
    <NButton label="Open" color="neutral" variant="subtle" />
  </NTooltip>
</template>

Certifique-se de envolver seu app com o componente App, que usa o componente TooltipProvider do Reka UI.

Você pode conferir a prop tooltip do componente App para ver como configurar o Tooltip globalmente.

Texto

Use a prop text para definir o conteúdo do Tooltip.

text

<template>
  <NTooltip text="Open on GitHub">
    <NButton label="Open" color="neutral" variant="subtle" />
  </NTooltip>
</template>

Kbds

Use a prop kbds para renderizar componentes Kbd no Tooltip.

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

Você pode usar teclas especiais como meta, que é exibida como ⌘ no macOS e Ctrl em outras plataformas.

Atraso

Use a prop delay-duration para alterar o atraso antes de o Tooltip aparecer. Por exemplo, você pode fazê-lo aparecer instantaneamente definindo-a como 0.

delayDuration

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

Isso pode ser configurado globalmente por meio da opção tooltip.delayDuration no componente App.

Conteúdo

Use a prop content para controlar como o conteúdo do Tooltip é renderizado, como seu align ou side, por exemplo.

Isso pode ser configurado globalmente por meio da opção tooltip.content no componente App.

content.align

content.side

content.sideOffset

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

Seta

Use a prop arrow para exibir uma seta no Tooltip.

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

Desabilitado

Use a prop disabled para desabilitar o Tooltip.

disabled

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

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 {@link AppProps } 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]`

Tema

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_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
        arrow: 'fill-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 '@nitro/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_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
            arrow: 'fill-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

Uma mensagem sucinta para fornecer informação ou feedback ao usuário.

AuthForm

Um Form personalizável para criar formulários de login, cadastro ou redefinição de senha.