feat(dismissible-tag): make tooltip position configurable (#20155)

* feat(align): add dismisstooltipalign prop

* feat(WC): dismisstooltipalign attribute

* fix: snapshot

* fix: rename dismissTooltipAlign to dismissTooltipAlignment

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

Author: maradwan26

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3075,6 +3075,25 @@ Map {
       "disabled": {
         "type": "bool",
       },
+      "dismissTooltipAlignment": {
+        "args": [
+          [
+            "top",
+            "bottom",
+            "left",
+            "right",
+            "top-start",
+            "top-end",
+            "bottom-start",
+            "bottom-end",
+            "left-end",
+            "left-start",
+            "right-end",
+            "right-start",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "dismissTooltipLabel": {
         "type": "string",
       },

packages/react/src/components/Tag/DismissibleTag.tsx

@@ -28,6 +28,7 @@ import { isEllipsisActive } from './isEllipsisActive';
 import mergeRefs from '../../tools/mergeRefs';
 import { AILabel } from '../AILabel';
 import { isComponentElement } from '../../internal';
+import { PopoverAlignment } from '../Popover';
 
 export interface DismissibleTagBaseProps {
   /**
@@ -45,6 +46,11 @@ export interface DismissibleTagBaseProps {
    */
   disabled?: boolean;
 
+  /**
+   * Specify the tooltip alignment for the dismiss button
+   */
+  dismissTooltipAlignment?: PopoverAlignment;
+
   /**
    * Provide a custom tooltip label for the dismiss button
    */
@@ -118,6 +124,7 @@ const DismissibleTag = forwardRef(
       text,
       tagTitle,
       type,
+      dismissTooltipAlignment = 'bottom',
       dismissTooltipLabel = 'Dismiss tag',
       ...other
     }: DismissibleTagProps<T>,
@@ -187,7 +194,7 @@ const DismissibleTag = forwardRef(
           )}
           <Tooltip
             label={dismissActionLabel}
-            align="bottom"
+            align={dismissTooltipAlignment}
             className={tooltipClasses}
             leaveDelayMs={0}
             closeOnActivation>
@@ -221,6 +228,24 @@ DismissibleTag.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify the tooltip alignment for the dismiss button
+   */
+  dismissTooltipAlignment: PropTypes.oneOf([
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+    'left-end',
+    'left-start',
+    'right-end',
+    'right-start',
+  ]),
+
   /**
    * Provide a custom tooltip label for the dismiss button
    */

packages/react/src/components/Tag/InteractiveTag.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.
@@ -410,6 +410,7 @@ export const Dismissible = (args) => {
             text={tag.text}
             tagTitle={tag.tagTitle}
             title="Dismiss"
+            dismissTooltipAlignment={args.dismissTooltipAlignment}
             onClose={(e) => {
               e.preventDefault();
               handleClose(tag);
@@ -425,6 +426,7 @@ export const Dismissible = (args) => {
 Dismissible.args = {
   disabled: false,
   size: 'md',
+  dismissTooltipAlignment: 'bottom',
 };
 
 Dismissible.argTypes = {
@@ -449,4 +451,25 @@ Dismissible.argTypes = {
       type: 'select',
     },
   },
+  dismissTooltipAlignment: {
+    options: [
+      'top',
+      'top-start',
+      'top-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'left',
+      'left-start',
+      'left-end',
+      'right',
+      'right-start',
+      'right-end',
+    ],
+    control: { type: 'select' },
+    description: 'Specify the tooltip alignment for the dismiss button',
+    table: {
+      defaultValue: { summary: 'bottom' },
+    },
+  },
 };

packages/web-components/src/components/tag/__tests__/__snapshots__/tag-test.snap.js

@@ -12,6 +12,7 @@ snapshots['cds-tag should render'] = `<cds-tag
 /* end snapshot cds-tag should render */
 
 snapshots['cds-tag cds-dismissible-tag should render'] = `<cds-dismissible-tag
+  dismiss-tooltip-alignment="bottom"
   open=""
   size="md"
   tag-title="Close tag"

packages/web-components/src/components/tag/dismissible-tag.ts

@@ -134,6 +134,16 @@ class CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Specify the tooltip alignment for the dismiss button
+   */
+  @property({
+    type: String,
+    attribute: 'dismiss-tooltip-alignment',
+    reflect: true,
+  })
+  dismissTooltipAlignment = 'bottom';
+
   /**
    * Provide a custom tooltip label for the dismiss button
    */
@@ -180,6 +190,7 @@ class CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {
       tagTitle,
       text,
       dismissTooltipLabel,
+      dismissTooltipAlignment,
     } = this;
 
     const dismissLabel = `Dismiss "${text}"`;
@@ -199,7 +210,7 @@ class CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {
         <slot name="decorator" @slotchange="${handleAILabelSlotChange}"></slot>
         <slot name="ai-label" @slotchange="${handleAILabelSlotChange}"></slot>
         <slot name="slug" @slotchange="${handleAILabelSlotChange}"></slot>
-        <cds-tooltip align="bottom" enter-delay-ms=${0}>
+        <cds-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>
           <button
             class="sb-tooltip-trigger"
             role="button"

packages/web-components/src/components/tag/tag.stories.ts

@@ -16,6 +16,7 @@ import '../popover';
 import '../ai-label';
 import '../button';
 import '../icon-button';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
 
 const content = html`
   <div slot="body-text">
@@ -69,6 +70,21 @@ const types = [
   'outline',
 ];
 
+const tooltipAlignments = {
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+  [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+  [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
 const defaultArgs = {
   disabled: false,
   size: TAG_SIZE.MEDIUM,
@@ -94,11 +110,20 @@ export const Dismissible = {
       control: 'text',
       description: 'Provide text to be rendered inside of a the tag.',
     },
+    dismissTooltipAlignment: {
+      control: 'select',
+      options: tooltipAlignments,
+      description: 'Specify the tooltip alignment for the dismiss button',
+      table: {
+        defaultValue: { summary: 'bottom' },
+      },
+    },
   },
   args: {
     ...defaultArgs,
+    dismissTooltipAlignment: 'bottom',
   },
-  render: ({ disabled, size, text }) => {
+  render: ({ disabled, size, text, dismissTooltipAlignment }) => {
     const tags = [
       {
         type: 'red',
@@ -168,6 +193,7 @@ export const Dismissible = {
             tag-title="${tag.tagTitle}"
             type="${tag.type}"
             size="${size}"
+            dismiss-tooltip-alignment="${dismissTooltipAlignment}"
             >${Asleep16({ slot: 'icon' })}</cds-dismissible-tag
           >`
       )}`;