diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
index c0dd730d57..5f7158b351 100644
--- a/jsapp/js/components/common/button.scss
+++ b/jsapp/js/components/common/button.scss
@@ -138,7 +138,7 @@ $button-border-radius: sizes.$x6;
 .k-button {
   cursor: pointer;
   color: inherit;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   align-content: center;
diff --git a/jsapp/js/components/common/button.stories.tsx b/jsapp/js/components/common/button.stories.tsx
index ee620f9c78..848ebf5ae4 100644
--- a/jsapp/js/components/common/button.stories.tsx
+++ b/jsapp/js/components/common/button.stories.tsx
@@ -1,11 +1,74 @@
 import React from 'react';
 import type {ComponentStory, ComponentMeta} from '@storybook/react';
 import Button from './button';
+import type {ButtonType, ButtonColor, ButtonSize} from './button';
+import type {TooltipAlignment} from './tooltip';
+import {IconNames} from 'jsapp/fonts/k-icons';
+
+const buttonTypes: ButtonType[] = ['bare', 'frame', 'full'];
+
+const buttonColors: ButtonColor[] = [
+  'blue',
+  'light-blue',
+  'red',
+  'storm',
+  'cloud',
+  'dark-red',
+  'dark-blue',
+];
+
+const buttonSizes: ButtonSize[] = ['s', 'm', 'l'];
+
+const tooltipPositions: TooltipAlignment[] = ['right', 'left', 'center'];
 
 export default {
   title: 'common/Button',
   component: Button,
-  argTypes: {},
+  argTypes: {
+    type: {
+      description: 'Type of button',
+      options: buttonTypes,
+      control: 'select',
+    },
+    color: {
+      description: 'Color of button',
+      options: buttonColors,
+      control: 'select',
+    },
+    size: {
+      description: 'Size of button',
+      options: buttonSizes,
+      control: 'radio',
+    },
+    startIcon: {
+      description: 'Icon on the beginning (please use only one of the icons)',
+      options: Object.keys(IconNames),
+      control: {type: 'select'},
+    },
+    endIcon: {
+      description: 'Icon on the end (please use only one of the icons)',
+      options: Object.keys(IconNames),
+      control: {type: 'select'},
+    },
+    label: {
+      control: 'text',
+    },
+    tooltip: {
+      description: 'Tooltip text',
+      control: 'text',
+    },
+    tooltipPosition: {
+      description: 'Position of the tooltip (optional)',
+      options: tooltipPositions,
+      control: 'radio',
+    },
+    isDisabled: {control: 'boolean'},
+    isPending: {control: 'boolean'},
+    isFullWidth: {
+      description: 'Makes the button take 100% width of the container',
+      control: 'boolean',
+    },
+  },
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
diff --git a/jsapp/js/components/common/button.tsx b/jsapp/js/components/common/button.tsx
index a3c80cfb09..5e3656f680 100644
--- a/jsapp/js/components/common/button.tsx
+++ b/jsapp/js/components/common/button.tsx
@@ -3,6 +3,8 @@ import type {IconName} from 'jsapp/fonts/k-icons';
 import type {IconSize} from 'js/components/common/icon';
 import Icon from 'js/components/common/icon';
 import './button.scss';
+import type {TooltipAlignment} from './tooltip';
+import Tooltip from './tooltip';
 
 /**
  * Note: we use a simple TypeScript types here instead of enums, so we don't
@@ -61,6 +63,8 @@ export interface ButtonProps {
    * for icon-only buttons.
    */
   tooltip?: string;
+  /** Sets the alignment of the tooltip */
+  tooltipPosition?: TooltipAlignment;
   isDisabled?: boolean;
   /** Changes the appearance to display spinner. */
   isPending?: boolean;
@@ -134,9 +138,6 @@ const Button = (props: ButtonProps) => {
 
   // For the attributes that don't have a falsy value.
   const additionalButtonAttributes: AdditionalButtonAttributes = {};
-  if (props.tooltip) {
-    additionalButtonAttributes['data-tip'] = props.tooltip;
-  }
   if (props['data-cy']) {
     additionalButtonAttributes['data-cy'] = props['data-cy'];
   }
@@ -153,7 +154,7 @@ const Button = (props: ButtonProps) => {
     }
   };
 
-  return (
+  const renderButton = () => (
     <button
       className={classNames.join(' ')}
       type={props.isSubmit ? 'submit' : 'button'}
@@ -176,6 +177,22 @@ const Button = (props: ButtonProps) => {
       )}
     </button>
   );
+
+  return (
+    <>
+      {props.tooltip !== undefined ? (
+        <Tooltip
+          text={props.tooltip}
+          ariaLabel={props.tooltip}
+          alignment={props.tooltipPosition}
+        >
+          {renderButton()}
+        </Tooltip>
+      ) : (
+        renderButton()
+      )}
+    </>
+  );
 };
 
 export default Button;
diff --git a/jsapp/scss/components/_kobo.tooltips.scss b/jsapp/js/components/common/tooltip.scss
similarity index 100%
rename from jsapp/scss/components/_kobo.tooltips.scss
rename to jsapp/js/components/common/tooltip.scss
diff --git a/jsapp/js/components/common/tooltip.stories.tsx b/jsapp/js/components/common/tooltip.stories.tsx
new file mode 100644
index 0000000000..a639fcc149
--- /dev/null
+++ b/jsapp/js/components/common/tooltip.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type {Meta, Story} from '@storybook/react';
+
+import type {TooltipProps, TooltipAlignment} from './tooltip';
+import Tooltip from './tooltip';
+
+const tooltipPositions: TooltipAlignment[] = ['right', 'left', 'center'];
+
+export default {
+  title: 'Common/Tooltip',
+  component: Tooltip,
+  description:
+    'This is a component that displays a tooltip on a button that is hovered over.',
+  argTypes: {
+    text: {
+      description: 'Content of the tooltip shown on hover over button',
+      control: 'text',
+    },
+    alignment: {
+      description:
+        'Position of the tooltip (centered as default)',
+      options: tooltipPositions,
+      control: 'radio',
+    },
+    ariaLabel: {
+      description: 'Accessible label for screen readers',
+    },
+  },
+} as Meta;
+
+const Template: Story<TooltipProps> = (args) => (
+  <Tooltip {...args}>
+    <button>Your Button</button>
+  </Tooltip>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Default Tooltip Text',
+  alignment: 'center',
+  ariaLabel: 'Default Tooltip Text',
+};
+
+export const Right = Template.bind({});
+Right.args = {
+  text: 'Right Aligned Tooltip Text',
+  alignment: 'right',
+  ariaLabel: 'Right Aligned Tooltip Text',
+};
+
+export const Left = Template.bind({});
+Left.args = {
+  text: 'Left Aligned Tooltip Text',
+  alignment: 'left',
+  ariaLabel: 'Left Aligned Tooltip Text',
+};
diff --git a/jsapp/js/components/common/tooltip.tsx b/jsapp/js/components/common/tooltip.tsx
new file mode 100644
index 0000000000..40eba80564
--- /dev/null
+++ b/jsapp/js/components/common/tooltip.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+export type TooltipAlignment = 'right' | 'left' | 'center';
+
+export interface TooltipProps {
+  /** Content of the tooltip */
+  text: string;
+  /** Accessible label for screen readers */
+  ariaLabel: string;
+  /** Position of the tooltip (centered as default) */
+  alignment?: TooltipAlignment;
+}
+
+/**
+ * Tooltip component that is necessary for managing dynamic content and
+ * accessibility features, such as readability. While we have the tooltip.scss
+ * component, that provides styling but not other functionaltiy such as
+ * allowing tooltips to work on disabled buttons.
+ */
+const Tooltip: React.FC<TooltipProps> = ({
+  text,
+  ariaLabel,
+  alignment,
+  children,
+}) => (
+  <span
+    data-tip={text}
+    className={`${alignment || 'center'}-tooltip`}
+    aria-label={ariaLabel}
+  >
+    {children}
+  </span>
+);
+export default Tooltip;
diff --git a/jsapp/js/projects/projectsTable/projectBulkActions.tsx b/jsapp/js/projects/projectsTable/projectBulkActions.tsx
index 192b82d52f..100a2b4e64 100644
--- a/jsapp/js/projects/projectsTable/projectBulkActions.tsx
+++ b/jsapp/js/projects/projectsTable/projectBulkActions.tsx
@@ -33,38 +33,38 @@ export default function ProjectBulkActions(props: ProjectBulkActionsProps) {
   return (
     <div className={actionsStyles.root}>
       {/* Archive / Unarchive - Bulk action not supported yet */}
-      <span data-tip={t('Archive/Unarchive')} className='right-tooltip'>
-        <Button
-          isDisabled
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='archived'
-        />
-      </span>
+      <Button
+        isDisabled
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='archived'
+        tooltip={t('Archive/Unarchive')}
+        tooltipPosition='right'
+      />
 
       {/* Share - Bulk action not supported yet */}
-      <span data-tip={t('Share projects')} className='right-tooltip'>
-        <Button
-          isDisabled
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='user-share'
-        />
-      </span>
+      <Button
+        isDisabled
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='user-share'
+        tooltip={t('Share projects')}
+        tooltipPosition='right'
+      />
 
       {/* Delete */}
-      <span data-tip={tooltipForDelete} className='right-tooltip'>
-        <Button
-          isDisabled={!canBulkDelete}
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='trash'
-          onClick={() => setIsDeletePromptOpen(true)}
-        />
-      </span>
+      <Button
+        isDisabled={!canBulkDelete}
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='trash'
+        onClick={() => setIsDeletePromptOpen(true)}
+        tooltip={tooltipForDelete}
+        tooltipPosition='right'
+      />
 
       {isDeletePromptOpen && (
         <BulkDeletePrompt
diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
index 5ba4d77852..4855f16fc5 100644
--- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx
+++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
@@ -38,95 +38,92 @@ export default function ProjectQuickActions(props: ProjectQuickActionsProps) {
       {/* Archive / Unarchive */}
       {/* Archive a deployed project */}
       {props.asset.deployment_status === 'deployed' && (
-        <span data-tip={t('Archive project')} className='right-tooltip'>
-          <Button
-            isDisabled={
-              !isChangingPossible ||
-              props.asset.asset_type !== ASSET_TYPES.survey.id ||
-              !props.asset.has_deployment
-            }
-            type='bare'
-            color='storm'
-            size='s'
-            startIcon='archived'
-            onClick={() =>
-              archiveAsset(props.asset, (response: DeploymentResponse) => {
-                customViewStore.handleAssetChanged(response.asset);
-              })
-            }
-          />
-        </span>
+        <Button
+          isDisabled={
+            !isChangingPossible ||
+            props.asset.asset_type !== ASSET_TYPES.survey.id ||
+            !props.asset.has_deployment
+          }
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='archived'
+          onClick={() =>
+            archiveAsset(props.asset, (response: DeploymentResponse) => {
+              customViewStore.handleAssetChanged(response.asset);
+            })
+          }
+          tooltip={t('Archive project')}
+          tooltipPosition='right'
+        />
       )}
       {/* Un-archive a deployed project */}
       {props.asset.deployment_status === 'archived' && (
-        <span data-tip={t('Unarchive project')} className='right-tooltip'>
-          <Button
-            isDisabled={
-              !isChangingPossible ||
-              props.asset.asset_type !== ASSET_TYPES.survey.id ||
-              !props.asset.has_deployment
-            }
-            type='bare'
-            color='storm'
-            size='s'
-            startIcon='archived'
-            onClick={() =>
-              unarchiveAsset(props.asset, (response: DeploymentResponse) => {
-                customViewStore.handleAssetChanged(response.asset);
-              })
-            }
-          />
-        </span>
+        <Button
+          isDisabled={
+            !isChangingPossible ||
+            props.asset.asset_type !== ASSET_TYPES.survey.id ||
+            !props.asset.has_deployment
+          }
+          type='bare'
+          color='storm'
+          size='s'
+          startIcon='archived'
+          onClick={() =>
+            unarchiveAsset(props.asset, (response: DeploymentResponse) => {
+              customViewStore.handleAssetChanged(response.asset);
+            })
+          }
+          tooltip={t('Unarchive project')}
+          tooltipPosition='right'
+        />
       )}
       {/* Show tooltip, since drafts can't be archived/unarchived */}
       {props.asset.deployment_status === 'draft' && (
-        <span data-tip={t('Draft project selected')} className='right-tooltip'>
-          <Button
-            isDisabled
-            type='bare'
-            color='storm'
-            size='s'
-            startIcon='archived'
-          />
-        </span>
-      )}
-
-      {/* Share */}
-      <span data-tip={t('Share project')} className='right-tooltip'>
         <Button
-          isDisabled={!isManagingPossible}
+          isDisabled
           type='bare'
           color='storm'
           size='s'
-          startIcon='user-share'
-          onClick={() => manageAssetSharing(props.asset.uid)}
+          startIcon='archived'
+          tooltip={t('Draft project selected')}
+          tooltipPosition='right'
         />
-      </span>
+      )}
+
+      {/* Share */}
+      <Button
+        isDisabled={!isManagingPossible}
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='user-share'
+        onClick={() => manageAssetSharing(props.asset.uid)}
+        tooltip={t('Share project')}
+        tooltipPosition='right'
+      />
 
       {/* Delete */}
-      <span
-        data-tip={
+      <Button
+        isDisabled={!isChangingPossible}
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='trash'
+        onClick={() =>
+          deleteAsset(
+            props.asset,
+            getAssetDisplayName(props.asset).final,
+            (deletedAssetUid: string) => {
+              customViewStore.handleAssetsDeleted([deletedAssetUid]);
+            }
+          )
+        }
+        tooltip={
           isChangingPossible ? t('Delete 1 project') : t('Delete project')
         }
-        className='right-tooltip'
-      >
-        <Button
-          isDisabled={!isChangingPossible}
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='trash'
-          onClick={() =>
-            deleteAsset(
-              props.asset,
-              getAssetDisplayName(props.asset).final,
-              (deletedAssetUid: string) => {
-                customViewStore.handleAssetsDeleted([deletedAssetUid]);
-              }
-            )
-          }
-        />
-      </span>
+        tooltipPosition='right'
+      />
     </div>
   );
 }
diff --git a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
index 224f80bb6d..e17c1a1ad4 100644
--- a/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
+++ b/jsapp/js/projects/projectsTable/projectQuickActionsEmpty.tsx
@@ -12,46 +12,37 @@ export default function ProjectQuickActionsEmpty() {
   return (
     <div className={styles.root}>
       {/* Archive / Unarchive */}
-      <span
-        data-tip={t('Archive/Unarchive') + ' – ' + NO_PROJECT_SELECTED}
-        className='right-tooltip'
-      >
-        <Button
-          isDisabled
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='archived'
-        />
-      </span>
+      <Button
+        isDisabled
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='archived'
+        tooltip={t('Archive/Unarchive') + ' – ' + NO_PROJECT_SELECTED}
+        tooltipPosition='right'
+      />
 
       {/* Share */}
-      <span
-        data-tip={t('Share project') + ' – ' + NO_PROJECT_SELECTED}
-        className='right-tooltip'
-      >
-        <Button
-          isDisabled
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='user-share'
-        />
-      </span>
+      <Button
+        isDisabled
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='user-share'
+        tooltip={t('Share project') + ' – ' + NO_PROJECT_SELECTED}
+        tooltipPosition='right'
+      />
 
       {/* Delete */}
-      <span
-        data-tip={t('Delete') + ' – ' + NO_PROJECT_SELECTED}
-        className='right-tooltip'
-      >
-        <Button
-          isDisabled
-          type='bare'
-          color='storm'
-          size='s'
-          startIcon='trash'
-        />
-      </span>
+      <Button
+        isDisabled
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='trash'
+        tooltip={t('Delete') + ' – ' + NO_PROJECT_SELECTED}
+        tooltipPosition='right'
+      />
     </div>
   );
 }
diff --git a/jsapp/scss/main.scss b/jsapp/scss/main.scss
index 332371671d..fa2f495941 100644
--- a/jsapp/scss/main.scss
+++ b/jsapp/scss/main.scss
@@ -29,7 +29,6 @@
 @import "./components/kobo.button";
 @import "./components/kobo.light-button";
 @import "./components/kobo.text-button";
-@import "./components/kobo.tooltips";
 @import "./components/kobo.tooltips-big";
 @import "./components/kobo.navigation";
 @import "./components/kobo.drawer";
@@ -46,6 +45,7 @@
 @import "./components/kobo.simple-table";
 @import "./components/kobo.background-audio-player";
 @import "./components/kobo.dropzone";
+@import 'jsapp/js/components/common/tooltip.scss';
 
 @import "./formbuild/kobomatrix";