Tooltip

Preview

<esa-tooltip text="Tooltip above" position="above">
  <button>Hover me</button>
</esa-tooltip>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-tooltip';

@Component({
  selector: 'app-tooltip-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-tooltip text="Tooltip above" position="above">
      <button>Hover me</button>
    </esa-tooltip>
  `,
})
export class TooltipDemo {}

Positions

<esa-tooltip text="Tooltip above" position="above">…</esa-tooltip>
<esa-tooltip text="Tooltip below" position="below">…</esa-tooltip>
<esa-tooltip text="Left side" position="left">…</esa-tooltip>
<esa-tooltip text="Right side" position="right">…</esa-tooltip>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-tooltip';

@Component({
  selector: 'app-tooltip-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-tooltip text="Tooltip above" position="above">…</esa-tooltip>
    <esa-tooltip text="Tooltip below" position="below">…</esa-tooltip>
    <esa-tooltip text="Left side" position="left">…</esa-tooltip>
    <esa-tooltip text="Right side" position="right">…</esa-tooltip>
  `,
})
export class TooltipDemo {}

Focusable trigger

Any focusable element works — the tooltip shows on focusin as well as hover, so keyboard users get it too.

<esa-tooltip text="Shows on focus too" position="above">
  <a href="#">Tab to me</a>
</esa-tooltip>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-tooltip';

@Component({
  selector: 'app-tooltip-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-tooltip text="Shows on focus too" position="above">
      <a href="#">Tab to me</a>
    </esa-tooltip>
  `,
})
export class TooltipDemo {}

API

Accessibility

• The bubble is role="tooltip" and is pointer-events: none so it never intercepts clicks.
• Shows on both hover and focus, so keyboard users see the same hint as pointer users.
• Tooltips supplement — they should not be the only place critical information lives.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-tooltip is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.