From 93ecf63e7080be135a60adc32ff37447ab1dc0a3 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <dehrax@users.noreply.github.com>
Date: Tue, 13 Aug 2019 13:41:49 +0200
Subject: [PATCH] InfoTooltip: Info icon with tooltip (#18478)

---
 .../components/InfoTooltip/InfoTooltip.story.tsx  |  9 +++++++++
 .../src/components/InfoTooltip/InfoTooltip.tsx    | 15 +++++++++++++++
 .../grafana-ui/src/components/Tooltip/Tooltip.tsx |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx
 create mode 100644 packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx

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', () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>);
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<TooltipProps, 'children' | 'content'> {
+  children: PopperContent<any>;
+}
+
+export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
+  return (
+    <Tooltip content={children} {...restProps}>
+      <i className="fa fa-info-circle" />
+    </Tooltip>
+  );
+};
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) => {