Repository: MyPureCloud/genesys-spark
Pull request #1091: feat(dropdown) - set the initial tooltip placement to the right
Author: login: gavin-everett-genesys
Created: 2025-05-15T15:07:25Z | Merged: 2025-05-16T11:19:38Z

https://inindca.atlassian.net/browse/COMUI-3750




Diff:
diff --git a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx
index 0ae42cd7ce..13d132dbde 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx
+++ b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx
@@ -165,7 +165,10 @@ export class GuxTooltipBase {
   private updatePosition(ref: ReferenceElement): void {
     const middleware = [
       offset(12),
-      flip(),
+      flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false
+      }),
       shift(),
       hide(),
       overflowDetection()
diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
index e5319c2e9f..481700b651 100644
--- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -40,7 +40,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -51,7 +51,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -62,7 +62,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -109,7 +109,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -120,7 +120,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -131,7 +131,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -142,7 +142,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -189,7 +189,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -200,7 +200,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -211,7 +211,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -222,7 +222,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -269,7 +269,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -280,7 +280,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -291,7 +291,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -302,7 +302,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap
index 192955b752..0d370e1eed 100644
--- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap
@@ -43,7 +43,7 @@ exports[`gux-pagination-legacy #render should render component as expected (1) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -54,7 +54,7 @@ exports[`gux-pagination-legacy #render should render component as expected (1) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -65,7 +65,7 @@ exports[`gux-pagination-legacy #render should render component as expected (1) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -76,7 +76,7 @@ exports[`gux-pagination-legacy #render should render component as expected (1) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -187,7 +187,7 @@ exports[`gux-pagination-legacy #render should render component as expected (2) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -198,7 +198,7 @@ exports[`gux-pagination-legacy #render should render component as expected (2) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -209,7 +209,7 @@ exports[`gux-pagination-legacy #render should render component as expected (2) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -220,7 +220,7 @@ exports[`gux-pagination-legacy #render should render component as expected (2) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -331,7 +331,7 @@ exports[`gux-pagination-legacy #render should render component as expected (3) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -342,7 +342,7 @@ exports[`gux-pagination-legacy #render should render component as expected (3) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -353,7 +353,7 @@ exports[`gux-pagination-legacy #render should render component as expected (3) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -364,7 +364,7 @@ exports[`gux-pagination-legacy #render should render component as expected (3) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -475,7 +475,7 @@ exports[`gux-pagination-legacy #render should render component as expected (4) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -486,7 +486,7 @@ exports[`gux-pagination-legacy #render should render component as expected (4) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -497,7 +497,7 @@ exports[`gux-pagination-legacy #render should render component as expected (4) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -508,7 +508,7 @@ exports[`gux-pagination-legacy #render should render component as expected (4) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -619,7 +619,7 @@ exports[`gux-pagination-legacy #render should render component as expected (5) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -630,7 +630,7 @@ exports[`gux-pagination-legacy #render should render component as expected (5) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -641,7 +641,7 @@ exports[`gux-pagination-legacy #render should render component as expected (5) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -652,7 +652,7 @@ exports[`gux-pagination-legacy #render should render component as expected (5) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -763,7 +763,7 @@ exports[`gux-pagination-legacy #render should render component as expected (6) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -774,7 +774,7 @@ exports[`gux-pagination-legacy #render should render component as expected (6) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -785,7 +785,7 @@ exports[`gux-pagination-legacy #render should render component as expected (6) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -796,7 +796,7 @@ exports[`gux-pagination-legacy #render should render component as expected (6) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -907,7 +907,7 @@ exports[`gux-pagination-legacy #render should render component as expected (7) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -918,7 +918,7 @@ exports[`gux-pagination-legacy #render should render component as expected (7) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -929,7 +929,7 @@ exports[`gux-pagination-legacy #render should render component as expected (7) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -940,7 +940,7 @@ exports[`gux-pagination-legacy #render should render component as expected (7) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1051,7 +1051,7 @@ exports[`gux-pagination-legacy #render should render component as expected (8) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1062,7 +1062,7 @@ exports[`gux-pagination-legacy #render should render component as expected (8) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1073,7 +1073,7 @@ exports[`gux-pagination-legacy #render should render component as expected (8) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1084,7 +1084,7 @@ exports[`gux-pagination-legacy #render should render component as expected (8) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1195,7 +1195,7 @@ exports[`gux-pagination-legacy #render should render component as expected (9) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1206,7 +1206,7 @@ exports[`gux-pagination-legacy #render should render component as expected (9) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1217,7 +1217,7 @@ exports[`gux-pagination-legacy #render should render component as expected (9) 1
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1228,7 +1228,7 @@ exports[`gux-pagination-legacy #render should render component as expected (9) 1
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1456,7 +1456,7 @@ exports[`gux-pagination-legacy #render should render component as expected (12)
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1467,7 +1467,7 @@ exports[`gux-pagination-legacy #render should render component as expected (12)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1478,7 +1478,7 @@ exports[`gux-pagination-legacy #render should render component as expected (12)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1489,7 +1489,7 @@ exports[`gux-pagination-legacy #render should render component as expected (12)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1600,7 +1600,7 @@ exports[`gux-pagination-legacy #render should render component as expected (13)
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1611,7 +1611,7 @@ exports[`gux-pagination-legacy #render should render component as expected (13)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1622,7 +1622,7 @@ exports[`gux-pagination-legacy #render should render component as expected (13)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1633,7 +1633,7 @@ exports[`gux-pagination-legacy #render should render component as expected (13)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1744,7 +1744,7 @@ exports[`gux-pagination-legacy #render should render component as expected (14)
                   <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1755,7 +1755,7 @@ exports[`gux-pagination-legacy #render should render component as expected (14)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1766,7 +1766,7 @@ exports[`gux-pagination-legacy #render should render component as expected (14)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
@@ -1777,7 +1777,7 @@ exports[`gux-pagination-legacy #render should render component as expected (14)
                   <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
                     <template shadowrootmode="open">
                       <div class="gux-option-wrapper">
-                        <gux-truncate>
+                        <gux-truncate tooltip-placement="right">
                           <slot></slot>
                         </gux-truncate>
                         <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/tests/__snapshots__/gux-dropdown-multi.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/tests/__snapshots__/gux-dropdown-multi.spec.ts.snap
index a787ea581a..9367e5a8b0 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/tests/__snapshots__/gux-dropdown-multi.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/tests/__snapshots__/gux-dropdown-multi.spec.ts.snap
@@ -32,7 +32,7 @@ exports[`gux-dropdown #render should render as expected 1`] = `
           <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
         </svg>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -46,7 +46,7 @@ exports[`gux-dropdown #render should render as expected 1`] = `
           <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
         </svg>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -60,7 +60,7 @@ exports[`gux-dropdown #render should render as expected 1`] = `
           <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
         </svg>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap
index 5feaf4fee8..c95304afa8 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap
@@ -24,7 +24,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="a">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -38,7 +38,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -49,7 +49,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="c">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -60,7 +60,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="d">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -71,7 +71,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="e">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -82,7 +82,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="f">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -93,7 +93,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="g">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -104,7 +104,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="h">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -118,7 +118,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
     <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="i">
       <template shadowrootmode="open">
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -168,7 +168,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -179,7 +179,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -190,7 +190,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -201,7 +201,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="d">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -225,7 +225,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="e">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -236,7 +236,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option" value="f">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -247,7 +247,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="g">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -271,7 +271,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="h">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -282,7 +282,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="i">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -332,7 +332,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
         <template shadowrootmode="open">
           <gux-icon decorative="" icon-name="user" size="small" style="color: var(--gux-blue-60);"></gux-icon>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -347,7 +347,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
         <template shadowrootmode="open">
           <gux-icon decorative="" icon-name="user" size="small" style="color: #8452cf;"></gux-icon>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -372,7 +372,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
         <template shadowrootmode="open">
           <gux-icon decorative="" icon-name="user" size="small" style="color: rgb(234, 11, 11);"></gux-icon>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -384,7 +384,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-group an
         <template shadowrootmode="open">
           <gux-icon icon-name="user" screenreader-text="Screenreader information about the icon goes here, if needed" size="small" style="color: #e08915;"></gux-icon>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -422,7 +422,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`]
       <template shadowrootmode="open">
         <gux-icon decorative="" icon-name="user" size="small" style="color: var(--gux-blue-60);"></gux-icon>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -437,7 +437,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`]
       <template shadowrootmode="open">
         <gux-icon decorative="" icon-name="user" size="small" style="color: #8452cf;"></gux-icon>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -449,7 +449,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`]
       <template shadowrootmode="open">
         <gux-icon decorative="" icon-name="user" size="small" style="color: rgb(234, 11, 11);"></gux-icon>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
@@ -461,7 +461,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`]
       <template shadowrootmode="open">
         <gux-icon icon-name="user" screenreader-text="Screenreader information about the icon goes here, if needed" size="small" style="color: #e08915;"></gux-icon>
         <div class="gux-option-wrapper">
-          <gux-truncate>
+          <gux-truncate tooltip-placement="right">
             <slot></slot>
           </gux-truncate>
           <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap
index 19b2d137c9..e5d84dccc2 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap
@@ -61,7 +61,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -75,7 +75,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -89,7 +89,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -172,7 +172,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -186,7 +186,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -200,7 +200,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help multi select
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -285,7 +285,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help should rende
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -299,7 +299,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help should rende
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -313,7 +313,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render help should rende
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -396,7 +396,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -410,7 +410,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -424,7 +424,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -504,7 +504,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -518,7 +518,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -532,7 +532,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -612,7 +612,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -626,7 +626,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -640,7 +640,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render input attributes
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -720,7 +720,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -734,7 +734,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -748,7 +748,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -828,7 +828,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -842,7 +842,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -856,7 +856,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -936,7 +936,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -950,7 +950,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -964,7 +964,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1044,7 +1044,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1058,7 +1058,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1072,7 +1072,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render label-position sh
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1152,7 +1152,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1166,7 +1166,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1180,7 +1180,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1260,7 +1260,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1274,7 +1274,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1288,7 +1288,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1368,7 +1368,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1382,7 +1382,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1396,7 +1396,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi indicator m
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1476,7 +1476,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi label-info
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1490,7 +1490,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi label-info
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1504,7 +1504,7 @@ exports[`gux-form-field-dropdown multi select dropdown #render multi label-info
             <path clip-rule="evenodd" d="M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" fill-rule="evenodd"></path>
           </svg>
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1581,7 +1581,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1592,7 +1592,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1603,7 +1603,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1675,7 +1675,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1686,7 +1686,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1697,7 +1697,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1769,7 +1769,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1780,7 +1780,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1791,7 +1791,7 @@ exports[`gux-form-field-dropdown single select dropdown #render indicator marks
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1863,7 +1863,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1874,7 +1874,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1885,7 +1885,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1957,7 +1957,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1968,7 +1968,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -1979,7 +1979,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2051,7 +2051,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2062,7 +2062,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2073,7 +2073,7 @@ exports[`gux-form-field-dropdown single select dropdown #render input attributes
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2145,7 +2145,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2156,7 +2156,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2167,7 +2167,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2239,7 +2239,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2250,7 +2250,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2261,7 +2261,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2333,7 +2333,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2344,7 +2344,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2355,7 +2355,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2427,7 +2427,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="true" class="gux-disabled" disabled="" id="gux-option-i" role="option" value="a">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2438,7 +2438,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option" value="b">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
@@ -2449,7 +2449,7 @@ exports[`gux-form-field-dropdown single select dropdown #render label-position s
       <gux-option aria-disabled="false" aria-selected="false" class="gux-show-subtext" id="gux-option-i" role="option" value="c">
         <template shadowrootmode="open">
           <div class="gux-option-wrapper">
-            <gux-truncate>
+            <gux-truncate tooltip-placement="right">
               <slot></slot>
             </gux-truncate>
             <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx
index c003895599..406ce15c70 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx
@@ -158,7 +158,10 @@ export class GuxOptionMulti {
         {/* The gux-slot-container attribute is used in gux-listbox-multi and gux-dropdown-multi as a selector to get the slotted gux-option-multi text.
         This attribute is required because we need to get the slotted text and exclude the screen reader text. */}
         <div class="gux-option-wrapper">
-          <gux-truncate ref={el => (this.truncateElement = el)}>
+          <gux-truncate
+            tooltip-placement="right"
+            ref={el => (this.truncateElement = el)}
+          >
             <slot />
           </gux-truncate>
           <slot onSlotchange={() => this.onSubtextChange()} name="subtext" />
diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.tsx
index 36889cd8ed..7e6132ec25 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.tsx
@@ -145,7 +145,10 @@ export class GuxOptionIcon {
       >
         {this.renderMaybeIcon('start')}
         <div class="gux-option-wrapper">
-          <gux-truncate ref={el => (this.truncateElement = el)}>
+          <gux-truncate
+            tooltip-placement="right"
+            ref={el => (this.truncateElement = el)}
+          >
             <slot />
           </gux-truncate>
           <slot onSlotchange={() => this.onSubtextChange()} name="subtext" />
diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx
index 53d5c6ccd9..742169b1be 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx
@@ -97,7 +97,10 @@ export class GuxOption {
         aria-disabled={this.disabled.toString()}
       >
         <div class="gux-option-wrapper">
-          <gux-truncate ref={el => (this.truncateElement = el)}>
+          <gux-truncate
+            tooltip-placement="right"
+            ref={el => (this.truncateElement = el)}
+          >
             <slot />
           </gux-truncate>
           <slot onSlotchange={() => this.onSubtextChange()} name="subtext" />
diff --git a/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
index 115903d61e..81abbbb193 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
+++ b/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -40,7 +40,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -51,7 +51,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -62,7 +62,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -109,7 +109,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -120,7 +120,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -131,7 +131,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -142,7 +142,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -189,7 +189,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -200,7 +200,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -211,7 +211,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -222,7 +222,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -269,7 +269,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -280,7 +280,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -291,7 +291,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -302,7 +302,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -349,7 +349,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (5) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -360,7 +360,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (5) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -371,7 +371,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (5) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -382,7 +382,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (5) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -429,7 +429,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (6) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -440,7 +440,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (6) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -451,7 +451,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (6) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -462,7 +462,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (6) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -509,7 +509,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (7) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -520,7 +520,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (7) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -531,7 +531,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (7) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -542,7 +542,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (7) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -589,7 +589,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (8) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -600,7 +600,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (8) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -611,7 +611,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (8) 1`]
           <gux-option aria-disabled="false" aria-selected="false" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
@@ -622,7 +622,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (8) 1`]
           <gux-option aria-disabled="false" aria-selected="true" class="gux-selected" id="gux-option-i" role="option">
             <template shadowrootmode="open">
               <div class="gux-option-wrapper">
-                <gux-truncate>
+                <gux-truncate tooltip-placement="right">
                   <slot></slot>
                 </gux-truncate>
                 <slot name="subtext"></slot>
diff --git a/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx b/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
index 9cc3397615..1b239a5916 100644
--- a/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
+++ b/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
@@ -131,7 +131,10 @@ export class GuxTooltip {
   private updatePosition(): void {
     const middleware = [
       offset(12),
-      flip(),
+      flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false
+      }),
       shift(),
       hide(),
       overflowDetection()


Reviews:
user: login: gavin-everett-genesys
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T15:09:31Z
user: login: gavin-everett-genesys
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-15T15:11:08Z
user: login: daragh-king-genesys
body: LGTM just add it to the beta component too.
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-16T08:23:46Z
user: login: daragh-king-genesys
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-16T11:00:31Z

Review comments:
diff_hunk: @@ -131,7 +131,10 @@ export class GuxTooltip {
   private updatePosition(): void {
     const middleware = [
       offset(12),
-      flip(),
+      flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false
path: packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
user: login: gavin-everett-genesys
body: These settings were required as when the screen is small it was not detecting overflow and stayed in the `right` placement position. With these options added it will flip like so `[ 'right', 'left', 'top' , 'bottom']` in that order with `bottom` being the last option . Notes are here  (https://github.com/floating-ui/floating-ui/pull/2082#issuecomment-1368384210)

Also on the docs website : https://floating-ui.com/docs/flip#fallbackaxissidedirection
created_at: 2025-05-15T15:09:31Z
author_association: COLLABORATOR
diff_hunk: @@ -131,7 +131,10 @@ export class GuxTooltip {
   private updatePosition(): void {
     const middleware = [
       offset(12),
-      flip(),
+      flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false
path: packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
user: login: gavin-everett-genesys
body: I dont know if we should apply this to the `tooltip-beta` as it does not really apply to it yet ?
created_at: 2025-05-15T15:11:08Z
author_association: COLLABORATOR
diff_hunk: @@ -131,7 +131,10 @@ export class GuxTooltip {
   private updatePosition(): void {
     const middleware = [
       offset(12),
-      flip(),
+      flip({
+        fallbackAxisSideDirection: 'start',
+        crossAxis: false
path: packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
user: login: daragh-king-genesys
body: I think we should keep the beta component in sync because something like this will be easily missed when we eventually transition `gux-truncate` to use `gux-tooltip-beta'.
created_at: 2025-05-16T08:22:49Z
author_association: COLLABORATOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-15T15:07:35Z
body: <!-- add-pr-comment:add-pr-comment -->

Demo will be published at https://apps.inindca.com/common-ui-docs/genesys-webcomponents/feature/COMUI-3750
author_association: NONE
user: login: katie-clark-genesys
created_at: 2025-05-15T21:35:19Z
body: My only concern here is that this might not work as expected for RTL languages?
author_association: CONTRIBUTOR
user: login: gavin-everett-genesys
created_at: 2025-05-16T08:58:29Z
body: > My only concern here is that this might not work as expected for RTL languages?

I looked into this so it currently will still just flip to the right. I guess the intended would be to the left ? From the research I have done so far nothing has been implemented to support it regarding `placements` but there has been discussions https://github.com/floating-ui/floating-ui/issues/1530 . There is some workarounds but I am not sure if we want to go ahead using a workaround.  Ticket created for further discussion (https://inindca.atlassian.net/browse/COMUI-3764)
author_association: COLLABORATOR