Tooltip
Attach short contextual hints to controls without replacing visible labels.
Tooltip is a directive that can be applied to native or Kikita-styled triggers.
import { KuiTooltipDirective } from '@kikita-labs/ui';Provide short text and choose a preferred placement when the default top placement is not ideal.
<div class="basic-tooltip-example">
<button kuiButton type="button" [kuiTooltip]="'Save the current draft'">Save</button>
<button
kuiButton
type="button"
shape="soft"
[kuiTooltip]="'Open advanced settings'"
placement="bottom"
>
Settings
</button>
</div>Tooltip is transient, pointer-safe, and keyboard-aware.
- Shows on hover and keyboard focus-visible, then hides on leave and blur.
- Whitespace-only tooltip text is ignored.
- Tooltip content renders through CDK Overlay and layers above floating panels.
- Touch does not show a tooltip; use a popover, sheet, or visible helper text on mobile.
Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| [kuiTooltip] | string | '' | Tooltip text content. Empty or whitespace-only text does not render a tooltip. |
| placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred placement relative to the trigger. The CDK overlay can still adjust. |
| role | 'tooltip' | 'tooltip' | The floating element is exposed as a tooltip while it exists. |
| aria-describedby | string | null | null | Applied only while the tooltip is visible, preventing stale removed ids. |
| CSS variables | --kui-tooltip-* | - | Controls padding, radius, colors, and shadow through documented tooltip tokens. |
Tooltips supplement labels; they should not contain required information.
- Keep a visible label or accessible name on the trigger itself.
- Use tooltip text for short hints, not form errors or instructions required to finish a task.
aria-describedbyis present only while the floating tooltip exists.- Respect reduced-motion users; the package disables tooltip animation when requested.