VibeUI

Feedback

Keyboard Tooltip

Подсказка, которая открывается и по наведению, и по фокусу с клавиатуры. Второе обычно забывают, и подсказка остаётся недоступной половине пользователей.

  • tooltip
  • hint
  • accessibility
  • no-js

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/tooltip-001

Скопировать ссылку на проект
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «tooltip-001» (Keyboard Tooltip) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/tooltip-001.json

Registry item: https://vibeui.ru/r/tooltip-001.json
Ставится в: components/vibeui/tooltip-001.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Подсказка, которая открывается и по наведению, и по фокусу с клавиатуры. Второе обычно забывают, и подсказка остаётся недоступной половине пользователей.

Подсказка вокруг любого триггера: появляется по наведению и по фокусу с клавиатуры, две стороны (сверху и снизу), хвостик на CSS. Держится на :hover и :focus-within, поэтому клиентского JS нет вовсе. Подсказка объявлена как role="tooltip" и связывается с триггером через aria-describedby. Ноль зависимостей, один файл, своя палитра.

## 3. Как использовать
import { Tooltip001 } from "@/components/vibeui/tooltip-001"

<Tooltip001 id="copy-tip" tip="Скопировать ссылку на проект">
  <button type="button" aria-describedby="copy-tip">Скопировать</button>
</Tooltip001>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-tooltip-001-* и не подменять её токенами вашей темы (bg-popover, text-popover-foreground и подобными)
- равноправие :hover и :focus-within — подсказка обязана открываться с клавиатуры, иначе она недоступна
- pointer-events:none у самой подсказки: иначе она перехватывает курсор у триггера
- role="tooltip" и id, по которому триггер ссылается через aria-describedby
- хвостик из повёрнутого квадрата с background:inherit — он берёт цвет подсказки и не расходится с ней
- смещение через transform вместо изменения позиции: так подсказка не дёргается при появлении
- блок <style> внутри компонента — в нём вся палитра, стороны и хвостик

## 6. Можно менять
- tip — текст подсказки: одна короткая фраза
- children — ваш триггер: кнопка, иконка, слово в тексте
- side: top или bottom, в зависимости от того, где есть место
- open — принудительный показ: онбординг, отладка, витрина; в обычном интерфейсе оставляйте false
- id — свой на каждую подсказку, если их на странице несколько
- внешние отступы через className

## 7. Правила
- Не кладите в подсказку то, без чего интерфейс непонятен: подсказка не видна на телефоне, где нет наведения.
- Не помещайте внутрь подсказки ссылки и кнопки: до них нельзя доехать курсором, она исчезает.
- Триггер должен быть фокусируемым — кнопка или ссылка. У <span> подсказка не откроется с клавиатуры.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/tooltip-001.json
https://vibeui.ru/r/tooltip-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-tooltip-001-*. Появление держат :hover и :focus-within у обёртки, поэтому JS не нужен и компонент остаётся серверным. Хвостик — повёрнутый квадрат того же цвета. Подсказка помечена role="tooltip" и имеет id: свяжите с ним триггер через aria-describedby. Без переданного children рисуется кнопка-заглушка — она нужна только для превью.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react"

export type Tooltip001Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children" | "id"
> & {
  /** Текст подсказки. */
  tip?: string
  /** Элемент, к которому она относится: кнопка, иконка, слово в тексте. */
  children?: ReactNode
  side?: "top" | "bottom"
  /** Показать подсказку принудительно: онбординг, отладка, витрина. */
  open?: boolean
  /** Идентификатор для aria-describedby у вашего триггера. */
  id?: string
}

// Идея компонента: подсказка появляется и по наведению, и по фокусу с
// клавиатуры — второе обычно забывают, и подсказка остаётся недоступной
// половине пользователей. Всё держится на :hover и :focus-within, JS не нужен.
const STYLES = `
:where([data-vibeui-block="tooltip-001"]){
--vibeui-tooltip-001-fg:oklch(0.97 0.002 265);
--vibeui-tooltip-001-bg:oklch(0.26 0.014 265);
--vibeui-tooltip-001-radius:0.4375rem;
--vibeui-tooltip-001-gap:0.5rem;
--vibeui-tooltip-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="tooltip-001"]{
position:relative;display:inline-flex;font-family:var(--vibeui-tooltip-001-font);
}
[data-vibeui-block="tooltip-001"] [data-part="tip"]{
position:absolute;left:50%;z-index:20;
max-width:16rem;width:max-content;
padding:0.375rem 0.5625rem;
border-radius:var(--vibeui-tooltip-001-radius);
background:var(--vibeui-tooltip-001-bg);color:var(--vibeui-tooltip-001-fg);
font-size:0.75rem;line-height:1.4;text-align:center;
pointer-events:none;opacity:0;
transform:translate(-50%,0.25rem);
transition:opacity .14s ease,transform .14s ease;
}
[data-vibeui-block="tooltip-001"][data-side="top"] [data-part="tip"]{bottom:calc(100% + var(--vibeui-tooltip-001-gap))}
[data-vibeui-block="tooltip-001"][data-side="bottom"] [data-part="tip"]{top:calc(100% + var(--vibeui-tooltip-001-gap));transform:translate(-50%,-0.25rem)}
/* Хвостик — повёрнутый квадрат того же цвета. */
[data-vibeui-block="tooltip-001"] [data-part="tip"]::after{
content:"";position:absolute;left:50%;width:0.5rem;height:0.5rem;
margin-left:-0.25rem;background:inherit;transform:rotate(45deg);
}
[data-vibeui-block="tooltip-001"][data-side="top"] [data-part="tip"]::after{bottom:-0.1875rem}
[data-vibeui-block="tooltip-001"][data-side="bottom"] [data-part="tip"]::after{top:-0.1875rem}
/* Наведение и фокус равноправны: подсказка обязана открываться с клавиатуры. */
[data-vibeui-block="tooltip-001"][data-open="true"] [data-part="tip"],
[data-vibeui-block="tooltip-001"]:hover [data-part="tip"],
[data-vibeui-block="tooltip-001"]:focus-within [data-part="tip"]{
opacity:1;transform:translate(-50%,0);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="tooltip-001"] *{animation:none!important;transition:none!important}}
`

/** Кнопка-заглушка превью: подсказке нужен триггер, а зависимостей у нас нет. */
const DEFAULT_TRIGGER_STYLE = `
[data-vibeui-block="tooltip-001"] [data-part="sample"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
width:2.25rem;height:2.25rem;border-radius:0.5rem;
border:1px solid oklch(0.88 0.008 265);background:oklch(1 0 0);
color:oklch(0.35 0.014 265);font:inherit;font-size:0.9375rem;
}
[data-vibeui-block="tooltip-001"] [data-part="sample"]:focus-visible{outline:2px solid oklch(0.55 0.2 262);outline-offset:2px}
`

/**
 * Подсказка, открывающаяся и по наведению, и по фокусу с клавиатуры.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Tooltip001({
  tip = "Скопировать ссылку на проект",
  children,
  side = "top",
  open = false,
  id = "vibeui-tooltip-001",
  className,
  style,
  ...props
}: Tooltip001Props) {
  return (
    <>
      <style href="vibeui-tooltip-001" precedence="medium">
        {STYLES + DEFAULT_TRIGGER_STYLE}
      </style>
      <span
        {...props}
        data-vibeui-block="tooltip-001"
        data-side={side}
        data-open={open || undefined}
        className={className}
        style={style as CSSProperties}
      >
        {children ?? (
          <button data-part="sample" type="button" aria-describedby={id}>
            ⧉
          </button>
        )}
        <span data-part="tip" role="tooltip" id={id}>
          {tip}
        </span>
      </span>
    </>
  )
}