Tooltip

Contextual hint that appears on hover or focus, providing supplementary information without cluttering the UI. Supports four placement positions and a configurable show delay.

Components

Tooltip

feedback

hybrid

<arc-tooltip>

Overview

Tooltip is a non-intrusive disclosure component that surfaces contextual information when a user hovers over or focuses on an element. Use it when a control's purpose is not obvious from its visual alone: icon-only buttons, truncated labels, abbreviated values, and keyboard shortcuts. The component supports four placements (top, bottom, left, right), so the tooltip can sit wherever there is space around its trigger. A configurable delay (defaulting to 200 ms) prevents tooltips from firing on casual mouse movement, such as a pointer sweeping across a dense toolbar. Tooltip links the popup to its trigger via `aria-describedby`, uses the `role="tooltip"` semantic, and dismisses on Escape so keyboard and screen-reader users receive the same contextual hints as mouse users. Because the popup is pointer-events-none, it never blocks interaction with surrounding elements.

Guidelines

When to use

Use tooltips on icon-only buttons to describe the action (e.g. "Edit", "Delete")
Keep tooltip text short: one line, ideally under eight words
Prefer top position as the default; switch only when clipped by viewport edges
Set a longer delay (400-600 ms) in dense toolbars to reduce visual noise
Pair with aria-label on the trigger when the tooltip is the only accessible name

When not to use

Do not put interactive content (links, buttons) inside a tooltip. Use Popover instead
Do not duplicate information already visible in the trigger label
Do not use tooltips for essential information that the user must see to complete a task
Do not set delay to 0. Instant tooltips are distracting during normal pointer movement
Do not rely on tooltips for touch-only users; they have no hover event to trigger them

Features

Four placement positions (top, bottom, left, right)
Configurable show delay to avoid accidental activation
Accessible by default with `aria-describedby` and `role="tooltip"`
Escape key dismissal for keyboard users
Automatic show on hover (mouseenter) and focus (focusin)
Opacity transition using design-token timing
Directional arrow that points toward the trigger element
Pointer-events-none popup that never blocks surrounding UI

Preview

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<div style="display: flex; align-items: center; gap: 16px;">
  <arc-tooltip content="Edit item" position="top">
    <arc-icon-button label="Edit"><arc-icon name="pencil"></arc-icon></arc-icon-button>
  </arc-tooltip>
  <arc-tooltip content="Delete item" position="top">
    <arc-icon-button label="Delete"><arc-icon name="trash"></arc-icon></arc-icon-button>
  </arc-tooltip>
  <arc-tooltip content="Settings" position="bottom">
    <arc-icon-button label="Settings"><arc-icon name="gear"></arc-icon></arc-icon-button>
  </arc-tooltip>
  <arc-tooltip content="Download file" position="bottom">
    <arc-icon-button label="Download"><arc-icon name="download"></arc-icon></arc-icon-button>
  </arc-tooltip>
</div>

import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-react';

export function ActionBar() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Tooltip content="Edit item" position="top">
        <IconButton label="Edit"><Icon name="pencil" /></IconButton>
      </Tooltip>
      <Tooltip content="Delete item" position="top">
        <IconButton label="Delete"><Icon name="trash" /></IconButton>
      </Tooltip>
      <Tooltip content="Settings" position="bottom">
        <IconButton label="Settings"><Icon name="gear" /></IconButton>
      </Tooltip>
      <Tooltip content="Download file" position="bottom">
        <IconButton label="Download"><Icon name="download" /></IconButton>
      </Tooltip>
    </div>
  );
}

<script setup>
import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-vue';
</script>

<template>
  <div style="display: flex; align-items: center; gap: 16px;">
    <Tooltip content="Edit item" position="top">
      <IconButton label="Edit"><Icon name="pencil" /></IconButton>
    </Tooltip>
    <Tooltip content="Delete item" position="top">
      <IconButton label="Delete"><Icon name="trash" /></IconButton>
    </Tooltip>
    <Tooltip content="Settings" position="bottom">
      <IconButton label="Settings"><Icon name="gear" /></IconButton>
    </Tooltip>
    <Tooltip content="Download file" position="bottom">
      <IconButton label="Download"><Icon name="download" /></IconButton>
    </Tooltip>
  </div>
</template>

<script>
  import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-svelte';
</script>

<div style="display: flex; align-items: center; gap: 16px;">
  <Tooltip content="Edit item" position="top">
    <IconButton label="Edit"><Icon name="pencil" /></IconButton>
  </Tooltip>
  <Tooltip content="Delete item" position="top">
    <IconButton label="Delete"><Icon name="trash" /></IconButton>
  </Tooltip>
  <Tooltip content="Settings" position="bottom">
    <IconButton label="Settings"><Icon name="gear" /></IconButton>
  </Tooltip>
  <Tooltip content="Download file" position="bottom">
    <IconButton label="Download"><Icon name="download" /></IconButton>
  </Tooltip>
</div>

import { Component } from '@angular/core';
import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-angular';

@Component({
  imports: [Tooltip, IconButton, Icon],
  template: `
    <div style="display: flex; align-items: center; gap: 16px;">
      <arc-tooltip content="Edit item" position="top">
        <arc-icon-button label="Edit"><arc-icon name="pencil" /></arc-icon-button>
      </arc-tooltip>
      <arc-tooltip content="Delete item" position="top">
        <arc-icon-button label="Delete"><arc-icon name="trash" /></arc-icon-button>
      </arc-tooltip>
      <arc-tooltip content="Settings" position="bottom">
        <arc-icon-button label="Settings"><arc-icon name="gear" /></arc-icon-button>
      </arc-tooltip>
      <arc-tooltip content="Download file" position="bottom">
        <arc-icon-button label="Download"><arc-icon name="download" /></arc-icon-button>
      </arc-tooltip>
    </div>
  `,
})
export class ActionBarComponent {}

import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-solid';

export function ActionBar() {
  return (
    <div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
      <Tooltip content="Edit item" position="top">
        <IconButton label="Edit"><Icon name="pencil" /></IconButton>
      </Tooltip>
      <Tooltip content="Delete item" position="top">
        <IconButton label="Delete"><Icon name="trash" /></IconButton>
      </Tooltip>
      <Tooltip content="Settings" position="bottom">
        <IconButton label="Settings"><Icon name="gear" /></IconButton>
      </Tooltip>
      <Tooltip content="Download file" position="bottom">
        <IconButton label="Download"><Icon name="download" /></IconButton>
      </Tooltip>
    </div>
  );
}

import { Tooltip, IconButton, Icon } from '@arclux/arc-ui-preact';

export function ActionBar() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Tooltip content="Edit item" position="top">
        <IconButton label="Edit"><Icon name="pencil" /></IconButton>
      </Tooltip>
      <Tooltip content="Delete item" position="top">
        <IconButton label="Delete"><Icon name="trash" /></IconButton>
      </Tooltip>
      <Tooltip content="Settings" position="bottom">
        <IconButton label="Settings"><Icon name="gear" /></IconButton>
      </Tooltip>
      <Tooltip content="Download file" position="bottom">
        <IconButton label="Download"><Icon name="download" /></IconButton>
      </Tooltip>
    </div>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-tooltip — requires tooltip.css + base.css (or arc-ui.css) -->
<span class="arc-tooltip">
  <div
   class="tooltip__trigger"
   aria-describedby="_tooltip Id"
  >
    Tooltip
  </div>
  <div
   class="tooltip__popup _visible"
   role="tooltip"
   id="_tooltip Id"
  >
    Content goes here
    <div class="tooltip__arrow"></div>
  </div>
</span>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-tooltip — self-contained, no external CSS needed -->
<span class="arc-tooltip" style="display: inline-block; position: relative">
  <div
   style="display: inline-block"
   aria-describedby="_tooltip Id"
  >
    Tooltip
  </div>
  <div
   role="tooltip"
   id="_tooltip Id"
  >
    Content goes here
    <div style="position: absolute; width: 8px; height: 8px; background: rgb(17, 17, 22); border: 1px solid rgb(34, 34, 41); transform: rotate(45deg)"></div>
  </div>
</span>

API

contentstring='': The plain-text string displayed inside the tooltip popup. Keep this concise: one short phrase that describes the trigger element or provides a supplementary hint. HTML is not supported; for formatted content, use the Popover component instead.
delaynumber=200: Time in milliseconds to wait after mouseenter or focusin before the tooltip becomes visible. The default of 200 ms prevents accidental activation during casual pointer movement. Increase to 400-600 ms in dense toolbars; avoid setting to 0 as it creates a jittery experience.
position'top' | 'bottom' | 'left' | 'right'='top': Controls which side of the trigger the tooltip appears on. Top is the most common default. Switch to bottom, left, or right when the trigger sits near a viewport edge or when the surrounding layout makes another direction more natural.

Tooltip

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight