diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
index 3266a58f80c..921e791bd0e 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
@@ -13,16 +13,57 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    content: {
+      control: {
+        type: 'text',
+      },
+    },
+    theme: {
+      control: {
+        type: 'select',
+        options: ['info', 'error'],
+      },
+    },
+    placement: {
+      control: {
+        type: 'select',
+        options: [
+          'auto',
+          'bottom',
+          'top',
+          'auto-start',
+          'auto-end',
+          'right',
+          'left',
+          'top-start',
+          'top-end',
+          'bottom-start',
+          'bottom-end',
+          'right-start',
+          'right-end',
+          'left-start',
+          'left-end',
+        ],
+      },
+    },
   },
 };
 
-export const basic = () => {
-  const VISUAL_GROUP = 'Visual options';
-  // ---
-  const theme = select('Theme', ['info', 'error', 'info-alt'], 'info', VISUAL_GROUP);
+export const Basic: Story = ({ content, ...args }) => {
   return (
-    <Tooltip content="This is a tooltip" theme={theme}>
+    <Tooltip content={content} {...args}>
       <Button>Hover me for Tooltip </Button>
     </Tooltip>
   );
 };
+Basic.args = {
+  content: 'This is a tooltip',
+  theme: 'info',
+  show: true,
+  placement: 'auto',
+};