IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

InfoTooltip: Info icon with tooltip (#18478)

Browse Source
This commit is contained in:
Tobias Skarhed 2019-08-13 13:41:49 +02:00 committed by GitHub
parent 993e5636d6
commit 93ecf63e70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.story.tsx Normal file
View File

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

15
packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx Normal file
View File

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

2
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
View File

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