Support tooltip arrow color in display settings and extract findElement utility

src/types.ts

@@ -35,6 +35,7 @@ export interface DisplaySettings {
   overlayPosition?: string;
   elementSelector?: string;
   tooltipPosition?: string;
+  tooltipArrowColor?: string;
   maxWidth?: number;
   overlayColor?: string;
   dismissOutsideClick?: boolean;

src/utilities/message-utils.test.ts

@@ -406,6 +406,32 @@ describe('applyDisplaySettings', () => {
     expect(msg.position).toBeNull();
   });
 
+  it('sets tooltipArrowColor for tooltip type when provided', () => {
+    const msg = makeMessage({ overlay: true });
+    applyDisplaySettings(msg, {
+      displayType: 'tooltip',
+      elementSelector: 'my-element',
+      tooltipPosition: 'top',
+      tooltipArrowColor: '#FF5733',
+    });
+
+    expect(msg.properties?.gist?.tooltipArrowColor).toBe('#FF5733');
+  });
+
+  it('does not set tooltipArrowColor when not provided in display settings', () => {
+    const msg = makeMessage({
+      overlay: true,
+      properties: { gist: { tooltipArrowColor: '#original' } },
+    });
+    applyDisplaySettings(msg, {
+      displayType: 'tooltip',
+      elementSelector: 'my-element',
+      tooltipPosition: 'top',
+    });
+
+    expect(msg.properties?.gist?.tooltipArrowColor).toBe('#original');
+  });
+
   it('clears tooltipPosition when switching from tooltip to modal', () => {
     const msg = makeMessage({ tooltipPosition: 'top', elementId: 'my-element' });
     applyDisplaySettings(msg, { displayType: 'modal' });
@@ -433,6 +459,39 @@ describe('applyDisplaySettings', () => {
     expect(getCurrentDisplayType(msg)).toBe('inline');
   });
 
+  it('clears tooltipArrowColor when switching from tooltip to modal', () => {
+    const msg = makeMessage({
+      tooltipPosition: 'top',
+      elementId: 'my-element',
+      properties: { gist: { tooltipArrowColor: '#FF5733' } },
+    });
+    applyDisplaySettings(msg, { displayType: 'modal' });
+
+    expect(msg.properties?.gist?.tooltipArrowColor).toBeUndefined();
+  });
+
+  it('clears tooltipArrowColor when switching from tooltip to overlay', () => {
+    const msg = makeMessage({
+      tooltipPosition: 'top',
+      elementId: 'my-element',
+      properties: { gist: { tooltipArrowColor: '#FF5733' } },
+    });
+    applyDisplaySettings(msg, { displayType: 'overlay', overlayPosition: 'topCenter' });
+
+    expect(msg.properties?.gist?.tooltipArrowColor).toBeUndefined();
+  });
+
+  it('clears tooltipArrowColor when switching from tooltip to inline', () => {
+    const msg = makeMessage({
+      tooltipPosition: 'top',
+      elementId: 'my-element',
+      properties: { gist: { tooltipArrowColor: '#FF5733' } },
+    });
+    applyDisplaySettings(msg, { displayType: 'inline', elementSelector: 'my-container' });
+
+    expect(msg.properties?.gist?.tooltipArrowColor).toBeUndefined();
+  });
+
   it('clears custom width for wide overlay positions', () => {
     const msg = makeMessage({
       overlay: false,

src/utilities/message-utils.ts

@@ -172,6 +172,7 @@ export function applyDisplaySettings(message: GistMessage, displaySettings: Disp
     message.properties.gist.position = displaySettings.modalPosition || 'center';
     message.tooltipPosition = undefined;
     message.properties.gist.tooltipPosition = undefined;
+    message.properties.gist.tooltipArrowColor = undefined;
   } else if (displaySettings.displayType === 'overlay') {
     message.overlay = false;
     const elementId = mapOverlayPositionToElementId(displaySettings.overlayPosition);
@@ -181,6 +182,7 @@ export function applyDisplaySettings(message: GistMessage, displaySettings: Disp
     message.properties.gist.position = null;
     message.tooltipPosition = undefined;
     message.properties.gist.tooltipPosition = undefined;
+    message.properties.gist.tooltipArrowColor = undefined;
   } else if (displaySettings.displayType === 'inline') {
     message.overlay = false;
     message.elementId = displaySettings.elementSelector;
@@ -189,6 +191,7 @@ export function applyDisplaySettings(message: GistMessage, displaySettings: Disp
     message.properties.gist.position = null;
     message.tooltipPosition = undefined;
     message.properties.gist.tooltipPosition = undefined;
+    message.properties.gist.tooltipArrowColor = undefined;
   } else if (displaySettings.displayType === 'tooltip') {
     message.overlay = false;
     message.elementId = displaySettings.elementSelector;
@@ -197,6 +200,9 @@ export function applyDisplaySettings(message: GistMessage, displaySettings: Disp
     message.properties.gist.tooltipPosition = displaySettings.tooltipPosition;
     message.position = null;
     message.properties.gist.position = null;
+    if (displaySettings.tooltipArrowColor !== undefined) {
+      message.properties.gist.tooltipArrowColor = displaySettings.tooltipArrowColor;
+    }
   }
 
   const isWideOverlayPosition =