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