TkxTooltip

Hover or focus to open

toprightbottomleft

import { TkxTooltip, TkxButton } from 'tekivex-ui';

<TkxTooltip label="Save changes (Ctrl+S)">
  <TkxButton>Save</TkxButton>
</TkxTooltip>

Placement

<TkxTooltip label="Top" placement="top"><span>top</span></TkxTooltip>
<TkxTooltip label="Bottom" placement="bottom"><span>bottom</span></TkxTooltip>
<TkxTooltip label="Left" placement="left"><span>left</span></TkxTooltip>
<TkxTooltip label="Right" placement="right"><span>right</span></TkxTooltip>

When the preferred placement would clip the viewport, the tooltip flips to the opposite side automatically.

Delay

<TkxTooltip label="Saved" delay={400}>
  <TkxButton>Save</TkxButton>
</TkxTooltip>

Default open delay: 200ms. Close delay: 0ms.

Multiline content

Multiline content

Hover me

<TkxTooltip
  label={
    <>
      <strong>Keyboard shortcut</strong>
      <br />
      Hold Shift while clicking to open in a new tab.
    </>
  }
>
  <a href="...">Link</a>
</TkxTooltip>

Accessibility

• The tooltip content is connected via aria-describedby on the trigger
• Opens on mouse hover AND keyboard focus — never just hover
• Closes on mouse leave, focus blur, or Escape
• Touch devices: long-press to open, tap elsewhere to close

Tooltips are supplementary, not primary

Don’t put critical information in a tooltip. Touch users won’t see it, and screen readers may announce it inconsistently. Use a tooltip for additional context only — the primary affordance must work without it.

Don’t wrap interactive children inside Link/Button

Wrap the tooltip around an existing interactive element. Don’t make the tooltip itself interactive — that breaks the trigger pattern.

{/* ✅ Correct — TkxTooltip wraps the trigger */}
<TkxTooltip label="Save"><TkxButton>S</TkxButton></TkxTooltip>

{/* ❌ Wrong — tooltip on a non-interactive span */}
<TkxTooltip label="Save"><span onClick={save}>S</span></TkxTooltip>

Props

Prop	Type	Required	Description
label	ReactNode	yes	Tooltip content. Plain string for simple cases.
placement	'top' | 'bottom' | 'left' | 'right'		Defaults to top.
delay	number		Open delay in ms. Defaults to 200.
closeDelay	number		Close delay in ms. Defaults to 0.
disabled	boolean		Disables the tooltip without affecting the child.
children	ReactElement	yes	The trigger element. Must be a single React element.

Source

src/components/TkxTooltip.tsx