InfoTooltip: Info icon with tooltip (#18478)

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>);

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>
+  );
+};

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) => {