VibeUI

Label

Hint Popover

A label with a question button beside it: the long explanation hides in a native popover that opens without a single line of script.

  • label
  • popover
  • hint
  • no-js

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/label-002?lang=en

Four digits from the contract header, the «Unit» line. If the contract is not at hand, your manager knows the code.
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 "label-002" (Hint Popover) 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/label-002.json

Registry item: https://vibeui.ru/r/label-002.json
Installs to: components/vibeui/label-002.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
A label with a question button beside it: the long explanation hides in a native popover that opens without a single line of script.

A label with a question button: the explanation lives in a native popover the browser opens and closes on its own. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Label002 } from "@/components/vibeui/label-002"

<Label002
  label="Unit code"
  question="Where to find the unit code"
  answer="Four digits from the contract header, the «Unit» line."
/>

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-label-002-* palette — do not swap it for your theme tokens
- the native popover + popoverTarget pair: it gives Esc and click-outside dismissal for free, and useState takes all of that away
- the trigger as a <button type="button">: a <span> with a handler drops out of keyboard order
- the aria-label on the button — a bare "?" never says what the hint is about
- the @supports wrapper around anchor positioning: without it older browsers break the whole layout
- the block's own light surface: without it the dark label disappears on a dark background

## 6. You may change
- the field name through label, the spoken button text through question and the hint body through answer
- the accent and focus color through accent
- the dark hint background through the --vibeui-label-002-tip-* variables
- the side the hint appears on through position-area

## 7. Rules
- A popover is painted in the top layer: a parent's overflow:hidden will not clip it, but will not move it either.
- Where CSS anchor positioning is unsupported the hint lands in the middle of the screen — that is the deliberate fallback, not a bug.
- The hint opens on click rather than hover: hover is unreachable from a phone and from the keyboard.
- Do not hide anything the field cannot be filled without: hidden text is read by very few.

## 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/label-002.json
https://vibeui.ru/r/label-002.json

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-label-002-*. Серверный: из хуков только useId. Подсказка — нативный элемент с атрибутом popover="auto", кнопка открывает его через popoverTarget: браузер сам даёт закрытие по Esc и по клику мимо, обработчиков нет. Позиция подсказки берётся из CSS anchor positioning под @supports (anchor-name: --a) с position-try-fallbacks; там, где anchor не поддержан, браузер ставит popover по центру экрана — некрасиво, но текст доступен. Кнопка — обычный <button> с aria-label, поэтому попадает в порядок обхода и открывается с клавиатуры.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

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

export type Label002Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  label?: string
  question?: string
  answer?: string
  accent?: string
}

// Идея компонента: длинное объяснение рядом с подписью загромождает форму,
// а всплывающая подсказка обычно требует JS и мыши. Здесь кнопка-вопрос
// открывает нативный popover через popovertarget: работает без единой
// строчки скрипта, закрывается по Esc и по клику мимо, а с клавиатуры
// это обычная кнопка в порядке обхода.
const STYLES = `
:where([data-vibeui-block="label-002"]){
--vibeui-label-002-surface:oklch(1 0 0);
--vibeui-label-002-surface-border:oklch(0.91 0.006 265);
--vibeui-label-002-fg:oklch(0.24 0.016 265);
--vibeui-label-002-muted:oklch(0.54 0.014 265);
--vibeui-label-002-field-border:oklch(0.85 0.01 265);
--vibeui-label-002-accent:oklch(0.55 0.2 262);
--vibeui-label-002-tip-bg:oklch(0.22 0.02 265);
--vibeui-label-002-tip-fg:oklch(0.97 0.004 265);
--vibeui-label-002-radius:0.625rem;
--vibeui-label-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="label-002"]{
box-sizing:border-box;width:100%;max-width:24rem;
padding:1rem;border-radius:0.875rem;
background:var(--vibeui-label-002-surface);
border:1px solid var(--vibeui-label-002-surface-border);
font-family:var(--vibeui-label-002-font);color:var(--vibeui-label-002-fg);
display:flex;flex-direction:column;gap:0.4375rem;
}
[data-vibeui-block="label-002"] [data-part="row"]{
display:flex;align-items:center;gap:0.375rem;
}
[data-vibeui-block="label-002"] label{
font-size:0.875rem;font-weight:600;line-height:1.3;cursor:pointer;
}
[data-vibeui-block="label-002"] [data-part="ask"]{
appearance:none;flex:none;cursor:pointer;
width:1.125rem;height:1.125rem;padding:0;
display:inline-flex;align-items:center;justify-content:center;
font:inherit;font-size:0.75rem;font-weight:700;line-height:1;
color:var(--vibeui-label-002-muted);background:transparent;
border:1px solid var(--vibeui-label-002-field-border);border-radius:50%;
anchor-name:--vibeui-label-002-ask;
transition:color .16s ease,border-color .16s ease;
}
[data-vibeui-block="label-002"] [data-part="ask"]:hover{
color:var(--vibeui-label-002-accent);border-color:var(--vibeui-label-002-accent);
}
[data-vibeui-block="label-002"] [data-part="ask"]:focus-visible{
outline:2px solid var(--vibeui-label-002-accent);outline-offset:2px;
}
/* Без поддержки anchor-position браузер сам ставит popover по центру
   экрана — это некрасиво, но подсказка всё равно читается. */
[data-vibeui-block="label-002"] [data-part="tip"]{
box-sizing:border-box;margin:auto;padding:0.625rem 0.75rem;
max-width:17rem;border:0;border-radius:0.625rem;
font-family:var(--vibeui-label-002-font);font-size:0.8125rem;line-height:1.45;
color:var(--vibeui-label-002-tip-fg);background:var(--vibeui-label-002-tip-bg);
box-shadow:0 12px 28px oklch(0.2 0.02 265 / 28%);
}
@supports (anchor-name: --a){
[data-vibeui-block="label-002"] [data-part="tip"]{
position-anchor:--vibeui-label-002-ask;
margin:0.375rem 0 0;
position-area:bottom span-right;
position-try-fallbacks:flip-block,flip-inline;
}
}
[data-vibeui-block="label-002"] input{
box-sizing:border-box;width:100%;height:2.5rem;padding:0 0.75rem;
font:inherit;font-size:0.9375rem;
color:var(--vibeui-label-002-fg);background:var(--vibeui-label-002-surface);
border:1px solid var(--vibeui-label-002-field-border);
border-radius:var(--vibeui-label-002-radius);
transition:border-color .16s ease,box-shadow .16s ease;
}
[data-vibeui-block="label-002"] input::placeholder{color:var(--vibeui-label-002-muted)}
[data-vibeui-block="label-002"] input:focus-visible{
outline:none;border-color:var(--vibeui-label-002-accent);
box-shadow:0 0 0 3px color-mix(in oklab,var(--vibeui-label-002-accent) 22%,transparent);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="label-002"] *{animation:none!important;transition:none!important}}
`

/**
 * Подпись с кнопкой-вопросом: объяснение живёт в нативном popover и
 * открывается без JS. Один файл, ноль зависимостей, собственная палитра.
 */
export function Label002({
  label = "Код подразделения",
  question = "Где взять код подразделения",
  answer = "Четыре цифры из шапки договора, строка «Подразделение». Если договора под рукой нет, код подскажет ваш менеджер.",
  accent,
  className,
  style,
  ...props
}: Label002Props) {
  const id = useId()
  const tipId = `${id}-tip`
  const palette = {
    ...(accent ? { "--vibeui-label-002-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-label-002" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="label-002"
        className={className}
        style={palette}
      >
        <div data-part="row">
          <label htmlFor={id}>{label}</label>
          <button
            data-part="ask"
            type="button"
            popoverTarget={tipId}
            aria-label={question}
          >
            <span aria-hidden="true">?</span>
          </button>
        </div>
        <div data-part="tip" id={tipId} popover="auto">
          {answer}
        </div>
        <input id={id} type="text" name="unit" inputMode="numeric" />
      </div>
    </>
  )
}