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

Chart/Tooltip: refactored style declaration (#30824)

Browse Source 
* Chart/Tooltip: added theme variables and refactored style declaration

* added some changes

* removed useStyle hook since we're not using themes variables

* Added useStyle back since it memoizes the style generation
This commit is contained in:
Uchechukwu Obasi 2021-02-03 12:50:02 +01:00 committed by GitHub
parent ef589bd4ff
commit 1f66b5c7a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { Portal } from '../Portal/Portal';
import { Dimensions, TimeZone } from '@grafana/data';
import { FlotPosition } from '../Graph/types';
import { TooltipContainer } from './TooltipContainer';
import { useStyles } from '../../themes';
export type TooltipMode = 'single' | 'multi' | 'none';
@ -46,18 +47,10 @@ export interface TooltipProps {
}
export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) => {
const styles = useStyles(getStyles);
if (position) {
return (
<Portal
className={css`
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
`}
>
<Portal className={styles.portal}>
<TooltipContainer position={position} offset={offset || { x: 0, y: 0 }}>
{content}
</TooltipContainer>
@ -68,3 +61,16 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, position, offset }) =
};
Tooltip.displayName = 'ChartTooltip';
const getStyles = () => {
return {
portal: css`
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
`,
};
};