fix(react-component): ensure tooltips are fully visible by adding padding (#18883)

* fix(copybutton): ensure tooltips are fully visible by adding padding

* fix(toggletip): ensure tooltips are fully visible by adding padding

* fix(tooltip): ensure tooltips are fully visible by adding padding

* Update packages/react/src/components/CopyButton/CopyButton.stories.js

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

* Revert "Update packages/react/src/components/CopyButton/CopyButton.stories.js"

This reverts commit edbebee.

* fix: ensure tooltips are visible in StackBlitz using autoAlign

* fix(tooltip): ensure tooltip are visible in StackBlitz using autoAlign

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>

Author: 3 people

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

@@ -20,7 +20,9 @@ export default {
   },
 };
 
-export const Default = (args) => <CopyButton {...args} />;
+// Note: autoAlign is used here only to make tooltips visible in StackBlitz,
+// autoAlign is experimental and not part of the actual implementation.
+export const Default = (args) => <CopyButton autoAlign {...args} />;
 
 Default.argTypes = {
   className: {

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

@@ -87,11 +87,13 @@ export const ExperimentalAutoAlign = () => {
   );
 };
 
+// Note: autoAlign is used here only to make tooltips visible in StackBlitz,
+// autoAlign is experimental and not part of the actual implementation.
 export const Default = (args) => {
   return (
     <>
       <ToggletipLabel>Toggletip label</ToggletipLabel>
-      <Toggletip {...args}>
+      <Toggletip autoAlign {...args}>
         <ToggletipButton label="Show information">
           <Information />
         </ToggletipButton>

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

@@ -51,11 +51,13 @@ export default {
   ],
 };
 
+// Note: autoAlign is used here only to make tooltips visible in StackBlitz,
+// autoAlign is experimental and not part of the actual implementation.
 export const Default = (args) => {
   const label =
     'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
   return (
-    <Tooltip label={label} closeOnActivation={false} {...args}>
+    <Tooltip autoAlign label={label} closeOnActivation={false} {...args}>
       <button className="sb-tooltip-trigger" type="button">
         <Help />
       </button>
@@ -130,9 +132,11 @@ export const ExperimentalAutoAlign = () => {
   );
 };
 
+// Note: autoAlign is used here only to make tooltips visible in StackBlitz,
+// autoAlign is experimental and not part of the actual implementation.
 export const Duration = () => {
   return (
-    <Tooltip label="Label one" enterDelayMs={0} leaveDelayMs={300}>
+    <Tooltip autoAlign label="Label one" enterDelayMs={0} leaveDelayMs={300}>
       <Button>This button has a tooltip</Button>
     </Tooltip>
   );