Function createTooltip

packages/devtools-a11y/src/core/utils/ui.utils.ts:285–337

* Create a tooltip element for issues and position it above the target element

(
  issues: Array<TooltipIssue>,
  targetElement: Element,
)

  const tooltip = document.createElement('div')
  tooltip.className = `${TOOLTIP_CLASS} ${TOOLTIP_CLASS}--${mostSevere}`

  // Build tooltip content showing all issues
  if (sortedIssues.length === 1) {
    tooltip.textContent = `${SEVERITY_LABELS[mostSevere]}: ${firstIssue.ruleId}`
  } else {
    // Multiple issues - show count and list
    const issueList = sortedIssues
      .map((issue) => `${SEVERITY_LABELS[issue.impact]}: ${issue.ruleId}`)
      .join(' | ')
    tooltip.textContent = `${sortedIssues.length} issues: ${issueList}`
  }

  // Mark as overlay element so it's excluded from a11y scans
  tooltip.setAttribute('data-a11y-overlay', 'true')

  // Track this tooltip for scroll updates (need to add before positioning)
  activeTooltips.set(tooltip, targetElement)

  // Start scroll listener if not already running
  if (activeTooltips.size === 1) {
    startScrollListener()
  }

  // Position the tooltip - will flip below element if above viewport
  const { top, left } = calculateTooltipPosition(targetElement, tooltip)
  tooltip.style.top = `${top}px`
  tooltip.style.left = `${left}px`

  return tooltip
}

/**
 * Highlight a single element with the specified severity
 */
export function highlightElement(
  selector: string,
  impact: SeverityThreshold = 'serious',
  options: {
    showTooltip?: boolean
    ruleId?: string
    theme?: TanStackDevtoolsTheme
  } = {},
): void {
  const { showTooltip = true, ruleId, theme = 'dark' } = options

  try {
    injectStyles(theme)

    const elements = document.querySelectorAll(selector)
    if (elements.length === 0) {
      console.warn(`[A11y Overlay] No elements found for selector: ${selector}`)
      return
    }

    let highlightedCount = 0
    elements.forEach((el) => {