fixes per feedback

microsoft · Sep 20, 2024 · e9a37e1 · e9a37e1
1 parent e2599d4
commit e9a37e1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/packages/web-components/src/tooltip/tooltip.options.ts b/packages/web-components/src/tooltip/tooltip.options.ts
@@ -17,7 +17,7 @@ export const TooltipPositioning = {
   'after-top': 'inline-end span-block-end',
   after: 'inline-end',
   'after-bottom': 'inline-end span-block-start',
-};
+} as const;
 
 /**
  * The TooltipPositioning type

diff --git a/packages/web-components/src/tooltip/tooltip.spec.ts b/packages/web-components/src/tooltip/tooltip.spec.ts
@@ -49,7 +49,16 @@ test.describe('Tooltip', () => {
 
   test('default placement should be set to `above`', async ({ page }) => {
     const element = page.locator('fluent-tooltip');
-    await expect(element).toHaveAttribute('positioning', 'above');
+    const button = page.locator('button');
+    await expect(element).not.toHaveAttribute('positioning', 'above');
+
+    // show the element to get the position
+    await button.focus();
+
+    const buttonTop = await button.evaluate((node: HTMLElement) => node.getBoundingClientRect().top);
+    const elementBottom = await element.evaluate((node: HTMLElement) => node.getBoundingClientRect().bottom);
+
+    await expect(buttonTop).toBeGreaterThan(elementBottom);
   });
 
   test('should show the tooltip on hover', async ({ page }) => {

diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts
@@ -6,6 +6,7 @@ import {
   colorNeutralForeground1,
   colorNeutralShadowAmbient,
   colorNeutralShadowKey,
+  colorTransparentStroke,
   fontFamilyBase,
   fontSizeBase200,
   lineHeightBase200,
@@ -30,7 +31,7 @@ export const styles = css`
     --inlineOffset: ${spacingHorizontalXS};
     background: ${colorNeutralBackground1};
     border-radius: ${borderRadiusMedium};
-    border: 1px solid var(--colorTransparentStroke);
+    border: 1px solid ${colorTransparentStroke};
     box-sizing: border-box;
     color: ${colorNeutralForeground1};
     display: inline-flex;

diff --git a/packages/web-components/src/tooltip/tooltip.ts b/packages/web-components/src/tooltip/tooltip.ts
@@ -1,4 +1,4 @@
-import { attr, FASTElement } from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
 
 /**
  * A Tooltip Custom HTML Element.
@@ -14,7 +14,7 @@ export class Tooltip extends FASTElement {
   /**
    * Set the delay for the tooltip
    */
-  @attr
+  @attr({ converter: nullableNumberConverter })
   public delay?: number;
 
   /**
@@ -40,7 +40,8 @@ export class Tooltip extends FASTElement {
    * @internal
    */
   private get anchorElement(): HTMLElement | null {
-    return document.getElementById(this.anchor ?? '');
+    const rootNode = this.getRootNode();
+    return (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(this.anchor ?? '');
   }
 
   public constructor() {