VibeUI

Feedback

Shortcut Tooltip

Подсказка, которая заодно учит горячей клавише: название действия слева, сочетание клавишами справа — она становится справочником, а не повтором подписи.

  • tooltip
  • shortcut
  • kbd
  • toolbar

Превью

1440pxHost theme

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

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

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

Открыть поискCtrlK
Показать полную инструкцию

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

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

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

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

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

## 2. Что это
Подсказка, которая заодно учит горячей клавише: название действия слева, сочетание клавишами справа — она становится справочником, а не повтором подписи.

Подсказка с горячей клавишей: действие и сочетание в одной строке, клавиши размечены <kbd>. Ноль зависимостей, один файл, клиентского JS нет.

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

<Tooltip003 tip="Открыть поиск" keys={["Ctrl", "K"]} />

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-tooltip-003-* и не подменять её токенами вашей темы
- aria-keyshortcuts на кнопке: сочетание должно быть доступно и без наведения
- словесную подпись группы клавиш — иначе вслух читается набор отдельных букв
- теги <kbd> вместо строки «Ctrl+K»: клавиши узнают по форме
- открытие по :focus-within — подсказка обязана появляться и с клавиатуры
- собственную светлую подложку кнопки: без неё тёмный текст пропадает на тёмном фоне

## 6. Можно менять
- текст действия через tip
- состав сочетания через keys — массив клавиш рисуется по одной
- свой триггер через children вместо кнопки по умолчанию
- цвет клавиш через переменную --vibeui-tooltip-003-key

## 7. Правила
- На macOS привычны ⌘ и ⌥: подставляйте их сами, компонент платформу не определяет.
- Сочетание в подсказке должно совпадать с реальным обработчиком — компонент клавиши не слушает.
- Больше трёх клавиш в ряд читаются плохо: длинные аккорды лучше писать словами.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-tooltip-003-*. Серверный: открытие держится на :hover и :focus-within. Клавиши нарисованы тегами <kbd> с полупрозрачной заливкой, а не текстом «Ctrl+K»: так их видно как клавиши. На кнопке стоит aria-keyshortcuts, поэтому сочетание доступно и без наведения, а группе клавиш дана словесная подпись через aria-label — иначе скринридер прочитает набор букв.

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

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

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

export type Tooltip003Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  tip?: string
  /** Клавиши сочетания: каждая рисуется отдельной клавишей. */
  keys?: string[]
  children?: ReactNode
}

// Идея компонента: подсказка, которая заодно учит горячей клавише. Название
// действия и сочетание разведены по краям, клавиши нарисованы как <kbd> —
// поэтому подсказка становится справочником, а не повтором подписи кнопки.
const STYLES = `
:where([data-vibeui-block="tooltip-003"]){
--vibeui-tooltip-003-bg:oklch(0.24 0.014 265);
--vibeui-tooltip-003-fg:oklch(0.97 0.002 265);
--vibeui-tooltip-003-key:oklch(1 0 0 / 14%);
--vibeui-tooltip-003-keyfg:oklch(0.88 0.008 265);
--vibeui-tooltip-003-accent:oklch(0.6 0.16 265);
--vibeui-tooltip-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="tooltip-003"]{
position:relative;display:inline-flex;font-family:var(--vibeui-tooltip-003-font);
}
[data-vibeui-block="tooltip-003"] [data-part="trigger"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.375rem;
height:2.25rem;padding:0 0.875rem;border-radius:0.625rem;
border:1px solid oklch(0.89 0.006 265);
background:oklch(1 0 0);color:oklch(0.26 0.014 265);
font:inherit;font-size:0.8125rem;font-weight:620;
}
[data-vibeui-block="tooltip-003"] [data-part="trigger"]:hover{background:oklch(0.97 0.003 265)}
[data-vibeui-block="tooltip-003"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-tooltip-003-accent);outline-offset:2px}
/* Название и сочетание разведены по краям одной строки. */
[data-vibeui-block="tooltip-003"] [data-part="tip"]{
position:absolute;bottom:calc(100% + 0.5rem);left:50%;z-index:20;
display:flex;align-items:center;gap:0.625rem;width:max-content;
padding:0.375rem 0.4375rem 0.375rem 0.625rem;border-radius:0.5rem;
background:var(--vibeui-tooltip-003-bg);color:var(--vibeui-tooltip-003-fg);
font-size:0.75rem;line-height:1.4;
pointer-events:none;opacity:0;
transform:translate(-50%,0.25rem);
transition:opacity .13s ease,transform .13s ease;
}
[data-vibeui-block="tooltip-003"] [data-part="tip"]::after{
content:"";position:absolute;left:50%;bottom:-0.1875rem;
width:0.5rem;height:0.5rem;margin-left:-0.25rem;
background:inherit;transform:rotate(45deg);
}
[data-vibeui-block="tooltip-003"]:hover [data-part="tip"],
[data-vibeui-block="tooltip-003"]:focus-within [data-part="tip"]{opacity:1;transform:translate(-50%,0)}
[data-vibeui-block="tooltip-003"] [data-part="keys"]{display:inline-flex;align-items:center;gap:0.1875rem;flex:none}
[data-vibeui-block="tooltip-003"] kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:1.25rem;height:1.25rem;padding:0 0.3125rem;box-sizing:border-box;
border-radius:0.3125rem;background:var(--vibeui-tooltip-003-key);
color:var(--vibeui-tooltip-003-keyfg);
font-family:inherit;font-size:0.6875rem;font-weight:650;line-height:1;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="tooltip-003"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_KEYS = ["Ctrl", "K"]

/**
 * Подсказка с горячей клавишей: название действия и сочетание в одной строке.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Tooltip003({
  tip = "Открыть поиск",
  keys = DEFAULT_KEYS,
  children,
  className,
  style,
  ...props
}: Tooltip003Props) {
  const spoken = keys.join(" + ")

  return (
    <>
      <style href="vibeui-tooltip-003" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="tooltip-003"
        className={className}
        style={style as CSSProperties}
      >
        {children ?? (
          <button
            data-part="trigger"
            type="button"
            aria-keyshortcuts={keys.join("+")}
            aria-describedby="vibeui-tooltip-003-tip"
          >
            Поиск
          </button>
        )}
        <span data-part="tip" role="tooltip" id="vibeui-tooltip-003-tip">
          <span>{tip}</span>
          <span data-part="keys" aria-label={spoken}>
            {keys.map((key) => (
              <kbd key={key}>{key}</kbd>
            ))}
          </span>
        </span>
      </span>
    </>
  )
}