Tooltip — Malkai design system

Overview

A tooltip gives a compact control a visible name or a short contextual explanation without adding permanent text to the layout. It is supplementary: the trigger keeps its own accessible name, and essential instructions remain visible without hover.

Usage

Clarify a compact control or contextual factUse a tooltip when an icon needs a short action label or an information mark needs a concise explanation that would crowd the resting surface.
Reveal the same label on hover and keyboard focusThe tooltip appears after brief intent, remains while the trigger is active, and disappears without moving surrounding content.
Keep essential meaning on the triggerA tooltip never replaces an accessible name, visible field label, validation message, status, or instruction required to complete the task.

Anatomy

1Label surface. One non-interactive label or compact paragraph on a raised warm surface. It never receives focus.
2Pointer. The small directional mark identifies the trigger that owns the label.
3Trigger relationship. The wrapper positions the tooltip against one control without changing the control's target or layout.

Variants

Placement follows available space; it does not change the tooltip's meaning or interaction. Top is the default.

Information tooltip

.mk-tooltip-info allows one short paragraph when an information mark needs more than a label. It keeps the same trigger, reveal behaviour and placement rules; only the content measure and wrapping change.

Keep one compact explanationUse a few short sentences in one paragraph. If the content needs headings, steps or persistent reading, place it in the page.
Keep the surface non-interactiveA Tooltip cannot contain a link, button or other focus target. Use a Popover or help panel when the overlay itself must be entered.

States

Trigger state	Specimen	Behaviour
Rest		The tooltip is hidden and does not occupy layout space.
Hover		Pointer intent reveals the label after a brief delay.
Keyboard focus		The same label appears when the trigger receives visible keyboard focus.

Do and don't

Do

Name the immediate action in one or two words.

Don't

Do not turn a tooltip into an instruction or repeat interaction mechanics.

Copy

Lead an action label with the actionEdit, Copy, Close, More actions.
Keep labels to one line and information to one paragraphUse the fewest words that distinguish the control or explain the contextual fact.
Match the trigger's meaningThe tooltip and accessible name describe the same action even when the accessible name adds a specific target.

Accessibility

The trigger owns the nameIcon buttons retain aria-label; the tooltip is supplementary visible text.
Describe the tooltip relationshiparia-describedby connects the trigger to the tooltip when the visible wording adds useful context.
Never move focusThe tooltip is not interactive, cannot receive focus, and closes without changing keyboard position.

When to reach for something else

The text must always remain visibleUse a visible label, supporting text, or inline message.
The content contains an actionUse Menu, Popover, or another interactive overlay; a tooltip cannot contain controls.
The user must notice a resultUse Toast or an inline status surface; tooltips only explain their trigger.

Markup

<span class="mk-tooltip-wrap">
  <button class="mk-icon-btn" type="button" aria-label="Edit the item"
          aria-describedby="edit-item-tip">
    <svg data-mk-icon="edit" aria-hidden="true"></svg>
  </button>
  <span class="mk-tooltip" id="edit-item-tip" role="tooltip">Edit</span>
</span>

<!-- contextual information, still non-interactive -->
<span class="mk-tooltip-wrap">
  <button class="mk-icon-btn" type="button" aria-label="About this value"
          aria-describedby="value-info-tip">
    <svg data-mk-icon="info" aria-hidden="true"></svg>
  </button>
  <span class="mk-tooltip mk-tooltip-info is-right" id="value-info-tip" role="tooltip">
    This value is calculated from the current selection. It updates when the related inputs change.
  </span>
</span>