Tooltip

Import and live example#

One focused report-details trigger with a short explanatory tooltip.

import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAlertElement,
  AeliqoDialogElement,
  AeliqoDrawerElement,
  AeliqoEmptyStateElement,
  AeliqoPopoverElement,
  AeliqoProgressElement,
  AeliqoSkeletonElement,
  AeliqoToastElement,
  AeliqoTooltipElement,
} from "@varendo/web/feedback";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoTooltipElement>("aeliqo-tooltip", root);
		element.label = "More information";
		element.content = "Values are scoped to the current report.";
		element.open = true;
	}))(root);

Purpose#

A short supplemental explanation shown when its built-in trigger gets focus or hover. Escape hides it; it never serves as the trigger's accessible name.

When to use it#

• An icon or control needs a short extra explanation.
• The trigger already has an accessible name and the text is supplemental.
• The tip should appear on focus and hover and dismiss on Escape.

When to use a different component#

• Use Popover when the content needs interaction or richer structure.
• Use Text when the explanation is essential and must stay visible.

Properties and defaults#

The label names the trigger; content supplements it and is not the only place to put essential meaning.

Events#

• None; visibility follows focus/hover

States and failure handling#

Relevant states:

• ready

Expected result: The explanation appears on focus or hover without stealing focus from the trigger.

The built-in trigger opens the tooltip on focus or pointer hover and closes it on blur, pointer leave, or Escape. There is no disabled property and no separate component event. Remove the trigger when the explanation must be unavailable; setting open to false alone will not disable focus or hover. Keep a concise visible trigger label, because tooltip content is supplementary.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Tab
• Enter or Space where trigger semantics apply
• Escape dismisses the tooltip

Exposed semantics:

• aria-describedby
• aria-label
• button
• role

Responsive behavior#

Keep essential instructions outside the tooltip. The trigger remains the layout anchor when the viewport is narrow or zoomed.

Style hooks#

• Shadow parts: tooltip, trigger
• Varendo design tokens referenced: --aeliqo-color-canvas, --aeliqo-color-text, --aeliqo-control-min-target, --aeliqo-radius-small, --aeliqo-space-4, --aeliqo-space-8

Related components#

• Popover
• Dialog

Generated TypeScript declaration#

export declare class AeliqoTooltipElement extends AeliqoFoundationElement {
    static readonly properties: {
        label: {
            type: StringConstructor;
        };
        content: {
            type: StringConstructor;
        };
        open: {
            type: BooleanConstructor;
            reflect: boolean;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    label: string;
    content: string;
    open: boolean;
    private closeTimer;
    private show;
    private hide;
    private keydown;
    disconnectedCallback(): void;
    protected render(): import("lit").TemplateResult<1>;
}

Version#

This page documents the Varendo 0.6 component contract.