Feedback
Delayed Tooltip
The tooltip opens after a delay and hides instantly: sweeping the pointer across a row of buttons no longer sets off a flicker of tips.
- tooltip
- delay
- hover intent
- row
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/tooltip-009?lang=en
Acts on the selected rowActs on the selected rowActs on the selected row
Задержка появления — 0.5 с. Проведите курсором по строке: подсказки не мигают, потому что скрытие происходит без задержки.
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "tooltip-009" (Delayed Tooltip) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/tooltip-009.json
Registry item: https://vibeui.ru/r/tooltip-009.json
Installs to: components/vibeui/tooltip-009.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
The tooltip opens after a delay and hides instantly: sweeping the pointer across a row of buttons no longer sets off a flicker of tips.
A tooltip with an opening delay and instant hide, built on a single transition-delay. Zero dependencies, one file, no client JS.
## 3. How to use it
import { Tooltip009 } from "@/components/vibeui/tooltip-009"
<Tooltip009
tip="Acts on the selected row"
delay={0.5}
labels={["Copy", "Duplicate"]}
/>
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-tooltip-009-* palette — do not swap it for your theme tokens
- the delay only in the open state: put it in the base rule and the tooltip also fades out late
- the zero delay in the base rule — that is the instant-hide mechanism itself
- binding the tooltip to the cell rather than the button row
- opening on :focus-within — from the keyboard the tooltip must appear at once
- the card's own light surface: without it the dark text disappears on a dark background
## 6. You may change
- the delay length through delay
- the tooltip copy through tip
- the button captions through labels
- the tooltip colour through the --vibeui-tooltip-009-tip variable
## 7. Rules
- A delay over a second reads as a bug: 0.3 to 0.7 seconds is the sane range.
- The delay also applies to keyboard focus; if that bothers you, split :focus-within into a rule without transition-delay.
- Every button in the row shows the same text — in a real interface each has its own.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/tooltip-009.jsonhttps://vibeui.ru/r/tooltip-009.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-tooltip-009-*. Серверный: задержка стоит только в правиле открытого состояния через transition-delay, а базовое правило обнуляет её — поэтому появление ждёт, а исчезновение происходит сразу. Величина задержки живёт в --vibeui-tooltip-009-delay и приходит пропом delay, так что таймеры на JS не нужны. Подсказки привязаны к своим ячейкам, поэтому наведение на соседа не раскрывает всю строку.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Tooltip009Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
tip?: string
/** Задержка появления в секундах: защита от случайного пролёта курсора. */
delay?: number
labels?: string[]
}
// Идея компонента: подсказка появляется с задержкой, а прячется мгновенно.
// Задержка стоит только в правиле :hover, а базовое правило её обнуляет —
// поэтому пролёт курсора по строке кнопок не устраивает мигание подсказок.
const STYLES = `
:where([data-vibeui-block="tooltip-009"]){
--vibeui-tooltip-009-bg:oklch(1 0 0);
--vibeui-tooltip-009-fg:oklch(0.25 0.014 265);
--vibeui-tooltip-009-muted:oklch(0.55 0.014 265);
--vibeui-tooltip-009-border:oklch(0.9 0.006 265);
--vibeui-tooltip-009-tip:oklch(0.24 0.014 265);
--vibeui-tooltip-009-accent:oklch(0.57 0.17 265);
--vibeui-tooltip-009-delay:0.5s;
--vibeui-tooltip-009-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="tooltip-009"]{
display:flex;flex-direction:column;gap:0.75rem;
width:100%;max-width:24rem;box-sizing:border-box;
padding:1.5rem 1.125rem 1.125rem;
border:1px solid var(--vibeui-tooltip-009-border);border-radius:1rem;
background:var(--vibeui-tooltip-009-bg);color:var(--vibeui-tooltip-009-fg);
font-family:var(--vibeui-tooltip-009-font);
}
[data-vibeui-block="tooltip-009"] [data-part="row"]{display:flex;gap:0.5rem;flex-wrap:wrap}
[data-vibeui-block="tooltip-009"] [data-part="item"]{position:relative;display:inline-flex}
[data-vibeui-block="tooltip-009"] [data-part="button"]{
appearance:none;cursor:pointer;
height:2.125rem;padding:0 0.8125rem;border-radius:0.625rem;
border:1px solid var(--vibeui-tooltip-009-border);
background:oklch(0.98 0.003 265);color:inherit;
font:inherit;font-size:0.8125rem;font-weight:620;
}
[data-vibeui-block="tooltip-009"] [data-part="button"]:focus-visible{outline:2px solid var(--vibeui-tooltip-009-accent);outline-offset:2px}
/* Базовое правило: скрытие без задержки. */
[data-vibeui-block="tooltip-009"] [data-part="tip"]{
position:absolute;bottom:calc(100% + 0.5rem);left:50%;z-index:20;
width:max-content;max-width:12rem;
padding:0.375rem 0.5625rem;border-radius:0.5rem;
background:var(--vibeui-tooltip-009-tip);color:oklch(0.98 0.002 265);
font-size:0.75rem;line-height:1.4;
pointer-events:none;opacity:0;
transform:translate(-50%,0.25rem);
transition:opacity .12s ease 0s,transform .12s ease 0s;
}
[data-vibeui-block="tooltip-009"] [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-009"] [data-part="item"]:hover [data-part="tip"],
[data-vibeui-block="tooltip-009"] [data-part="item"]:focus-within [data-part="tip"]{
opacity:1;transform:translate(-50%,0);
transition-delay:var(--vibeui-tooltip-009-delay);
}
[data-vibeui-block="tooltip-009"] [data-part="note"]{
margin:0;font-size:0.75rem;line-height:1.5;color:var(--vibeui-tooltip-009-muted);
}
[data-vibeui-block="tooltip-009"] [data-part="note"] b{color:var(--vibeui-tooltip-009-fg);font-weight:650;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="tooltip-009"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_LABELS = ["Копировать", "Дублировать", "Архивировать"]
/**
* Подсказка с задержкой появления и мгновенным скрытием.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Tooltip009({
tip = "Действие над выбранной строкой",
delay = 0.5,
labels = DEFAULT_LABELS,
className,
style,
...props
}: Tooltip009Props) {
const palette = {
"--vibeui-tooltip-009-delay": `${delay}s`,
...style,
} as CSSProperties
return (
<>
<style href="vibeui-tooltip-009" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="tooltip-009"
className={className}
style={palette}
>
<div data-part="row">
{labels.map((label, index) => (
<span data-part="item" key={label}>
<button
data-part="button"
type="button"
aria-describedby={`vibeui-tooltip-009-${index}`}
>
{label}
</button>
<span
data-part="tip"
role="tooltip"
id={`vibeui-tooltip-009-${index}`}
>
{tip}
</span>
</span>
))}
</div>
<p data-part="note">
Задержка появления — <b>{delay} с</b>. Проведите курсором по
строке: подсказки не мигают, потому что скрытие происходит без
задержки.
</p>
</div>
</>
)
}