Add tooltip support to preview bar and introduce safe findElement utility

[karngyan]

Summary

Adds tooltip support to the preview bar and hardens DOM element lookup across the SDK.

Preview bar: tooltip display type

• Adds "Tooltip" as a fourth display type option in the preview bar dropdown (alongside Modal, Overlay, Inline)
• Renders tooltip-specific controls when selected: element selector input and position dropdown (top/bottom/left/right)
• Cleans up irrelevant settings (overlayColor, dismissOutsideClick, modalPosition) when switching to tooltip type
• Extracts shared buildElementSelectorControl from inline controls so both inline and tooltip can reuse it

findElement utility

• Introduces findElement(selector) in src/utilities/dom.ts — a safe wrapper that tries getElementById first, falls back to querySelector, and catches invalid selector errors instead of throwing
• Replaces duplicated try/catch + querySelector blocks in message-manager.ts with the new utility, simplifying both showTooltipMessage and handleGistEvents

Button hardening & style fixes

• Adds explicit type="button" to toggle, end-session, and select-element buttons to prevent unintended form submissions when the preview bar is embedded inside a customer's <form>
• Adds defensive CSS resets (appearance: none, min-width: auto, box-sizing: border-box) on preview bar buttons so host-page stylesheets don't distort them

Tests

• Adds dom.test.ts covering findElement — bare IDs, CSS selectors, missing elements, invalid selectors
• Adds preview-bar-manager.test.ts covering init, display type dropdown options, tooltip-specific controls, button type attributes, step changes, and teardown
• Adds a message-manager test for invalid selector error handling

Example app

• Adds an "Enable Preview Bar" button and auto-shows a live-preview message when cioPreviewId is present in the URL

---

Note

Medium Risk
Touches message display flow for tooltips and preview-session UI, so regressions could prevent messages from rendering or cause preview settings to apply incorrectly. Changes are localized and backed by new unit tests for selector safety and preview-bar behavior.

Overview
Adds tooltip as a new preview-bar display type, including element-selector + tooltip-position controls, and cleans up incompatible settings when switching display types.

Introduces a safe findElement DOM helper (id-first, selector fallback, catches invalid selectors) and replaces ad-hoc querySelector try/catch checks in message-manager/preview-bar-manager to avoid throwing on malformed selectors.

Hardens preview bar buttons by setting type="button" and adds CSS resets to reduce host-page style interference; expands tests for tooltip selector error handling, preview-bar UI behavior, and findElement, and updates the example page with a simple preview-bar activation demo.

^{Written by Cursor Bugbot for commit e2a08bd. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}