Grafana UI: Fix tooltip prop of button component (#64765)

fix tooltip prop of Button component

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -2,6 +2,7 @@ import { ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { ComponentSize } from '../../types/size';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Card } from '../Card/Card';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
@@ -14,6 +15,7 @@ const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
 export default {
   title: 'Buttons/Button',
   component: Button,
+  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
@@ -24,14 +26,7 @@ export default {
       options: sizes,
     },
     tooltip: {
-      table: {
+      control: 'text',
-        disable: true,
-      },
-    },
-    tooltipPlacement: {
-      table: {
-        disable: true,
-      },
     },
     className: {
       table: {

packages/grafana-ui/src/components/Button/Button.tsx

@@ -44,6 +44,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       className,
       type = 'button',
+      tooltip,
+      tooltipPlacement,
       ...otherProps
     },
     ref
@@ -58,12 +60,22 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       iconOnly: !children,
     });
 
-    return (
+    const button = (
       <button className={cx(styles.button, className)} type={type} {...otherProps} ref={ref}>
         {icon && <Icon name={icon} size={size} className={styles.icon} />}
         {children && <span className={styles.content}>{children}</span>}
       </button>
     );
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} placement={tooltipPlacement}>
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
   }
 );