Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkTooltip

A short contextual hint shown on hover or keyboard focus and dismissed with Escape. Wrap exactly one focusable React element that accepts aria-describedby. Do not put essential information or interactive controls only inside a tooltip.

Usage

React / TSX

import { WelkTooltip, WelkButton } from "@welkui/react";

<WelkTooltip variant="speech" content="You have got this!">
  <WelkButton>Hover or focus me</WelkButton>
</WelkTooltip>

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

bubble: thinking-bubble silhouette (default).
speech: speech-bubble tail.
speach: compatibility alias for speech.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

bubble

Hover or focus the trigger to reveal the thinking-bubble shape. Escape dismisses it.

Key propsvariant="bubble" content="A helpful hint"

speech

Hover or focus the trigger to reveal the speech-tail shape. Escape dismisses it.

Key propsvariant="speech" content="A helpful hint"

speach

Compatibility spelling: renders the same speech-tail silhouette as speech.

Key propsvariant="speach" content="A helpful hint"

Usage notes and accessibility

Use for short supplemental hints, not essential instructions or interactive content. The content prop is plain text.
Wrap exactly one focusable child that accepts aria-describedby. A native button or WelkButton is a suitable trigger; avoid a non-focusable span as the only access path.
Hover or keyboard focus reveals the hint; Escape dismisses it. Use speech for new code; speach is a supported compatibility spelling of the same shape.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkTooltip prop reference
Prop	Type	Default	Description
`content`	`string`	Required	Plain-text hint.
`children`	`ReactElement<{ "aria-describedby"?: string }>`	Required	One focusable child; receives the tooltip description reference.
`variant`	`"bubble" \| "speech" \| "speach"`	"bubble"	Bubble silhouette.
`className`	`string`	Unset	Additional CSS class on the component root.

This component supports the props listed above, not arbitrary native HTML attributes.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.