Add tooltip message type with viewport-aware positioning

examples/styles.css

@@ -421,4 +421,175 @@ h1 {
   .form-actions .button {
     width: 100%;
   }
-}
+}
+
+/* Tooltip Demo */
+.tooltip-demo {
+  margin: 24px 16px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,.06);
+  padding: 28px;
+}
+
+.tooltip-demo h2 {
+  font-size: 22px;
+  margin-bottom: 24px;
+  color: #264653;
+  border-bottom: 2px solid #e76f51;
+  padding-bottom: 8px;
+}
+
+.tooltip-section {
+  margin-bottom: 24px;
+}
+
+.tooltip-section h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.tooltip-section p {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.6;
+  margin-bottom: 12px;
+}
+
+.tooltip-section code {
+  background: #f0f0f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.tooltip-btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.tooltip-target {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-blue   { background: #3b82f6; color: #fff; }
+.btn-green  { background: #10b981; color: #fff; }
+.btn-orange { background: #f59e0b; color: #fff; }
+.btn-purple { background: #8b5cf6; color: #fff; }
+.btn-pink   { background: #ec4899; color: #fff; }
+
+.tooltip-position-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.tooltip-position-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+}
+
+.edge-demo-area {
+  position: relative;
+  min-height: 180px;
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+}
+
+.edge-demo-area .tooltip-target {
+  position: absolute;
+}
+
+.edge-demo-area .edge-tl { top: 8px; left: 8px; }
+.edge-demo-area .edge-tr { top: 8px; right: 8px; }
+.edge-demo-area .edge-bl { bottom: 8px; left: 8px; }
+.edge-demo-area .edge-br { bottom: 8px; right: 8px; }
+
+.tooltip-scroll-container {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.tooltip-scroll-container .scroll-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.tooltip-scroll-container .scroll-item:last-child {
+  border-bottom: none;
+}
+
+.scroll-item-btn {
+  background: #e0e7ff;
+  color: #4f46e5;
+  border: none;
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.tooltip-event-log {
+  background: #1e293b;
+  border-radius: 10px;
+  padding: 16px;
+  min-height: 80px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+}
+
+.tooltip-event-log .log-entry {
+  color: #94a3b8;
+  padding: 3px 0;
+  border-bottom: 1px solid #2d3748;
+}
+
+.tooltip-event-log .log-entry:last-child {
+  border-bottom: none;
+}
+
+.tooltip-event-log .log-entry .tag {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+.tag-shown   { background: #065f46; color: #6ee7b7; }
+.tag-action  { background: #1e3a5f; color: #7dd3fc; }
+.tag-error   { background: #7f1d1d; color: #fca5a5; }
+.tag-dismiss { background: #78350f; color: #fcd34d; }
+
+.tooltip-event-log .no-events {
+  color: #475569;
+  font-style: italic;
+}

src/gist.test.ts

@@ -38,6 +38,7 @@ vi.mock('./utilities/message-utils', () => ({
 }));
 vi.mock('./managers/message-component-manager', () => ({
   sendDisplaySettingsToIframe: vi.fn(),
+  clearAllTooltipHandles: vi.fn(),
 }));
 vi.mock('./managers/locale-manager', () => ({
   setUserLocale: vi.fn(),
@@ -73,7 +74,10 @@ import {
   logBroadcastDismissedLocally,
 } from './managers/message-manager';
 import { fetchMessageByInstanceId } from './utilities/message-utils';
-import { sendDisplaySettingsToIframe } from './managers/message-component-manager';
+import {
+  sendDisplaySettingsToIframe,
+  clearAllTooltipHandles,
+} from './managers/message-component-manager';
 import { setUserLocale } from './managers/locale-manager';
 import {
   setCustomAttribute,
@@ -217,6 +221,11 @@ describe('Gist', () => {
       expect(Gist.currentMessages).toEqual([]);
     });
 
+    it('clears all tooltip handles during setup', async () => {
+      await Gist.setup(baseConfig());
+      expect(clearAllTooltipHandles).toHaveBeenCalled();
+    });
+
     it('sets isDocumentVisible to true', async () => {
       await Gist.setup(baseConfig());
       expect(Gist.isDocumentVisible).toBe(true);

src/gist.ts

@@ -16,7 +16,10 @@ import {
   logBroadcastDismissedLocally,
 } from './managers/message-manager';
 import { fetchMessageByInstanceId } from './utilities/message-utils';
-import { sendDisplaySettingsToIframe } from './managers/message-component-manager';
+import {
+  sendDisplaySettingsToIframe,
+  clearAllTooltipHandles,
+} from './managers/message-component-manager';
 import { setUserLocale } from './managers/locale-manager';
 import {
   setCustomAttribute,
@@ -57,6 +60,7 @@ export default class Gist {
       experiments: config.experiments ?? false,
     };
     this.currentMessages = [];
+    clearAllTooltipHandles();
     this.overlayInstanceId = null;
     this.currentRoute = null;
     this.isDocumentVisible = true;

src/managers/gist-properties-manager.ts

@@ -26,7 +26,7 @@ export function resolveMessageProperties(message: GistMessage): ResolvedMessageP
   if (!gist) return defaults;
 
   return {
-    isEmbedded: !!gist.elementId,
+    isEmbedded: !!gist.elementId && !gist.tooltipPosition,
     elementId: gist.elementId || '',
     hasRouteRule: !!gist.routeRuleWeb,
     routeRule: gist.routeRuleWeb || '',