attachTooltipToHighlight() — astro Function Reference

Architecture documentation for the attachTooltipToHighlight() function in highlight.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ attachTooltipToHighlight() — astro Function Reference

Dependency Diagram

graph TD
  256f08d1_3eb6_93e9_f893_5adf8600e63d["attachTooltipToHighlight()"]
  21d4971d_ea22_2699_3ba8_0047fd0c2969["highlight.ts"]
  256f08d1_3eb6_93e9_f893_5adf8600e63d -->|defined in| 21d4971d_ea22_2699_3ba8_0047fd0c2969
  style 256f08d1_3eb6_93e9_f893_5adf8600e63d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts lines 57–92

export function attachTooltipToHighlight(
	highlight: DevToolbarHighlight,
	tooltip: HTMLElement,
	originalElement: Element,
) {
	highlight.shadowRoot.append(tooltip);

	(['mouseover', 'focus'] as const).forEach((event) => {
		highlight.addEventListener(event, () => {
			tooltip.dataset.show = 'true';
			const originalRect = originalElement.getBoundingClientRect();
			const dialogRect = tooltip.getBoundingClientRect();

			// Prevent the tooltip from being off the screen
			if (originalRect.top < dialogRect.height) {
				// Not enough space above, show below
				tooltip.style.top = `${originalRect.height + 15}px`;
			} else {
				tooltip.style.top = `-${tooltip.offsetHeight}px`;
			}
			if (dialogRect.right > document.documentElement.clientWidth) {
				// Not enough space on the right, align to the right
				tooltip.style.right = '0px';
			} else if (dialogRect.left < 0) {
				// Not enough space on the left, align to the left
				tooltip.style.left = '0px';
			}
		});
	});

	(['mouseout', 'blur'] as const).forEach((event) => {
		highlight.addEventListener(event, () => {
			tooltip.dataset.show = 'false';
		});
	});
}