diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx
new file mode 100644
index 00000000000..d5b55518d27
--- /dev/null
+++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { InfoTooltip } from './InfoTooltip';
+
+const story = storiesOf('UI/Tooltip', module);
+story.addDecorator(withCenteredStory);
+story.add('InfoTooltip', () => This is the content of the tooltip);
diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
new file mode 100644
index 00000000000..98eeaef9646
--- /dev/null
+++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tooltip, TooltipProps } from '../Tooltip/Tooltip';
+import { PopperContent } from '../Tooltip/PopperController';
+
+interface InfoTooltipProps extends Omit {
+ children: PopperContent;
+}
+
+export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
index 2b2a047639a..e0310300288 100644
--- a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
@@ -3,7 +3,7 @@ import * as PopperJS from 'popper.js';
import { Popper } from './Popper';
import { PopperController, UsingPopperProps } from './PopperController';
-interface TooltipProps extends UsingPopperProps {
+export interface TooltipProps extends UsingPopperProps {
theme?: 'info' | 'error';
}
export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {