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 { KuiTooltip } from '@kikita-labs/ui';Provide short text and choose a preferred placement. The default adaptive trigger uses hover/focus for mouse input and tap for touch input.
<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, keyboard-aware, and configurable at app, subtree, or instance scope.
- With
triggerType="auto", it shows on hover and keyboard focus for mouse input. - With
triggerType="auto", it toggles on tap for touch input. - Use
hoverto disable touch taps,clickto toggle on every device, ornoneto disable it. - Whitespace-only tooltip text is ignored.
- Tooltip content renders through CDK Overlay and layers above floating panels.
Set defaults.tooltip once for the application or for a subtree. Each option resolves as local input > defaults.tooltip.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
tooltip: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| triggerType | KuiTooltipTrigger | — | Default interaction mode for tooltip triggers. Defaults to adaptive auto behavior. |
| placement | 'top' | 'bottom' | 'left' | 'right' | — | Preferred side of the trigger. |
| offset | number | — | Gap in px between the trigger and the tooltip. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-tooltip-font-size | CSS custom property | --kui-text-sm-size | Font size |
Inputs verified against @kikita-labs/ui v2.0.0 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' | undefined | undefined | Preferred placement relative to the trigger (defaults.tooltip.placement, then top). The CDK overlay can still adjust. |
| offset | number | undefined | undefined | Gap in px between the trigger and the tooltip. Falls back to defaults.tooltip.offset, then 6. A static numeric string is coerced. |
| triggerType | 'auto' | 'hover' | 'click' | 'none' | undefined | undefined | Local interaction override. auto uses hover/focus for mouse input and tap for touch input. |
| KuiTooltipTriggerType | enum: Auto | Hover | Click | None | Auto | Enum values accepted by triggerType and tooltip provider options. |
| KuiTooltipOptions | interface | - | Shape of defaults.tooltip: triggerType, placement and offset, for app-wide and scoped tooltip defaults. |
| provideKuiDefaults({ tooltip }) | (defaults: KuiComponentDefaults) => Provider | - | Provides merged tooltip defaults for a component or route subtree; a local input wins and each level merges with its parent per property. |
| provideKikitaUi({ defaults: { tooltip } }) | KikitaUiOptions.defaults?: KuiComponentDefaults | - | Sets the root tooltip defaults through the main Kikita UI provider. |
| 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.- The tooltip is hoverable, dismissible with
Escapeand persistent while hovered or focused (WCAG 1.4.13). A tap-open tooltip closes on a second tap, an outside tap, focus moving outside orEscape. - Use a native interactive element, normally a
button, as the trigger. - Respect reduced-motion users; the package disables tooltip animation when requested.
Consumer-visible changes of @kikita-labs/ui 2.0 for Tooltip.
- The directive class is
KuiTooltip; theDirectivesuffix is gone. kuiProvideTooltipOptionsandKUI_TOOLTIP_OPTIONSare replaced byprovideKuiDefaults({ tooltip: { ... } }); a nested level merges with its parent per property.- Defaults now cover
placementandoffsetbesidestriggerType, and the tooltip has a newoffsetinput. - The default trigger opens the tooltip on touch taps; set
triggerType="hover"to keep the previous touch-disabled behaviour ornoneto disable it on all devices. - The tooltip is hoverable and dismissible with
Escape(WCAG 1.4.13), and its exit animation uses--kui-duration-quickand--kui-ease-exit.