feat(tooltip): react|wc parity

packages/react/src/components/Tooltip/Tooltip.featureflag.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -71,4 +71,19 @@ FloatingStyles.argTypes = {
       type: 'select',
     },
   },
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  description: {
+    control: {
+      type: 'text',
+    },
+  },
+  highContrast: {
+    table: {
+      disable: true,
+    },
+  },
 };

packages/react/src/components/Tooltip/Tooltip.stories.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,6 +25,45 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    align: {
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+
+        'left',
+        'left-end',
+        'left-start',
+
+        'right',
+        'right-end',
+        'right-start',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+    highContrast: {
+      table: {
+        disable: true,
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
   decorators: [
     (Story, context) => {
       if (context.name.toLowerCase().includes('auto align')) {
@@ -52,54 +91,15 @@ export const Default = (args) => {
   );
 };
 
-Default.argTypes = {
-  align: {
-    // TODO:
-    // 1. Should the deprecated options be deleted?
-    // 2. The list doesn't include all of the options available in the
-    //    component. Is it supposed to?
-    options: [
-      'top',
-      'top-left',
-      'top-right',
-
-      'bottom',
-      'bottom-left',
-      'bottom-right',
-
-      'left',
-      'left-bottom',
-      'left-top',
-
-      'right',
-      'right-bottom',
-      'right-top',
-    ],
-    control: {
-      type: 'select',
-    },
-  },
-  label: {
-    control: {
-      type: 'text',
-    },
-  },
-  description: {
-    control: {
-      type: 'text',
-    },
-  },
-};
-
-export const Alignment = () => {
+export const Alignment = (args) => {
   return (
-    <Tooltip label="Tooltip alignment" align="bottom-left">
+    <Tooltip label="Tooltip alignment" align="bottom-left" {...args}>
       <Button>This button has a tooltip</Button>
     </Tooltip>
   );
 };
 
-export const ExperimentalAutoAlign = () => {
+export const ExperimentalAutoAlign = (args) => {
   const ref = useRef();
   const tooltipLabel =
     'Scroll the container up, down, left or right to observe how the tooltip will automatically change its position in attempt to stay within the viewport. This works on initial render in addition to on scroll.';
@@ -115,7 +115,7 @@ export const ExperimentalAutoAlign = () => {
           top: '2500px',
           left: '2500px',
         }}>
-        <Tooltip label={tooltipLabel} align="top" autoAlign>
+        <Tooltip label={tooltipLabel} align="top" autoAlign {...args}>
           <Button ref={ref}>This button has a tooltip</Button>
         </Tooltip>
       </div>
@@ -125,9 +125,14 @@ export const ExperimentalAutoAlign = () => {
 
 // Note: autoAlign is used here only to make tooltips visible in StackBlitz,
 // autoAlign is in preview and not part of the actual implementation.
-export const Duration = () => {
+export const Duration = (args) => {
   return (
-    <Tooltip autoAlign label="Label one" enterDelayMs={0} leaveDelayMs={300}>
+    <Tooltip
+      autoAlign
+      label="Label one"
+      enterDelayMs={0}
+      leaveDelayMs={300}
+      {...args}>
       <Button>This button has a tooltip</Button>
     </Tooltip>
   );

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -84,7 +84,7 @@ interface TooltipBaseProps {
   /**
    * Render the component using the high-contrast theme
    */
-  highContrast?: boolean;
+  highContrast?: boolean; // TODO: remove in v12, highContrast should not be configurable
 
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
@@ -126,7 +126,7 @@ const Tooltip: TooltipComponent = React.forwardRef(
       defaultOpen = false,
       closeOnActivation = false,
       dropShadow = false,
-      highContrast = true,
+      highContrast = true, // TODO: remove in v12, highContrast should not be configurable
       ...rest
     }: TooltipProps<T>,
     ref?: PolymorphicRef<T>
@@ -289,7 +289,7 @@ const Tooltip: TooltipComponent = React.forwardRef(
         align={align}
         className={cx(`${prefix}--tooltip`, customClassName)}
         dropShadow={dropShadow}
-        highContrast={highContrast}
+        highContrast={highContrast} // TODO: v12 hard-set highContrast to true
         onKeyDown={onKeyDown}
         onMouseLeave={onMouseLeave}
         open={open}>
@@ -391,7 +391,7 @@ const Tooltip: TooltipComponent = React.forwardRef(
   /**
    * Render the component using the high-contrast theme
    */
-  highContrast: PropTypes.bool,
+  highContrast: PropTypes.bool, // TODO: remove in v12, highContrast should not be configurable
 
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use

packages/web-components/src/components/popover/popover.scss

@@ -283,13 +283,21 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='bottom-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(100% + $popover-offset)
     );
   }
 }
+:host(#{$prefix}-popover-content[tabTip][align='bottom-left']:not([autoalign])),
+:host(
+    #{$prefix}-popover-content[tabTip][align='bottom-start']:not([autoalign])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: 0;
+  }
+}
 
 // rtl
 :host(
@@ -311,11 +319,26 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-start']:not([autoalign])),
 :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 }
 
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-left']:not(
+        [autoalign]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-start']:not(
+        [autoalign]
+      )
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+  }
+}
+
 :host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
 :host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
@@ -328,10 +351,18 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='bottom-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 }
+:host(
+    #{$prefix}-popover-content[tabTip][align='bottom-right']:not([autoalign])
+  ),
+:host(#{$prefix}-popover-content[tabTip][align='bottom-end']:not([autoalign])) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+  }
+}
 
 // rtl
 :host(
@@ -348,6 +379,21 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-end']:not([autoalign])),
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-end']:not([autoalign])),
 :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-end']:not([autoalign])) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: calc(50% - $popover-offset);
+  }
+}
+
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-right']:not(
+        [autoalign]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-end']:not(
+        [autoalign]
+      )
+  ) {
   .#{$prefix}--popover-content {
     inset-inline-start: 0;
   }
@@ -697,7 +743,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='top-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(-100% - $popover-offset)
@@ -717,7 +763,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-start']:not([autoalign])),
 :host(#{$prefix}-slug[alignment='top-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 }
@@ -734,7 +780,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='top-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 }
@@ -751,7 +797,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-end']:not([autoalign])),
 :host(#{$prefix}-slug[alignment='top-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
   }
 }
 
@@ -780,7 +826,8 @@ $popover-border-color: custom-property.get-var(
 //-----------------------------------------------------------------------------
 
 // autoalign caret
-:host(#{$prefix}-popover-content[open][caret][autoalign]) {
+:host(#{$prefix}-popover-content[open][caret][autoalign]),
+:host(#{$prefix}-tooltip-content[open][caret][autoalign]) {
   .#{$prefix}--popover-caret {
     &::before {
       block-size: 8px;
@@ -809,8 +856,8 @@ $popover-border-color: custom-property.get-var(
 
   .#{$prefix}--popover-content[align^='bottom'] > .#{$prefix}--popover-caret {
     &::after {
-      inset-block-end: -1px;
-      inset-inline-start: 0.5px;
+      inset-block-start: 1px;
+      inset-inline-start: 1px;
     }
   }
 
@@ -823,7 +870,7 @@ $popover-border-color: custom-property.get-var(
   .#{$prefix}--popover-content[align^='right'] > .#{$prefix}--popover-caret {
     &::after {
       inset-block-start: -1px;
-      inset-inline-end: 0.5px;
+      inset-inline-start: 1px;
     }
   }
 }

packages/web-components/src/components/tooltip/tooltip-story.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/utilities/focus-outline';
 
 // This is a utility class to make sure that tooltip stories have a minimum
 // height when used in MDX docs
@@ -27,9 +28,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid theme.$border-subtle;
-  block-size: $spacing-07;
-  inline-size: $spacing-07;
+  block-size: 1rem;
+  inline-size: 1rem;
+}
+
+.sb-tooltip-trigger:focus {
+  @include focus-outline.focus-outline;
 }
 
 .sb-tooltip-trigger svg {