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

Tooltip: Fixes tooltip positioning when using lazy content (#77676)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-11-07 07:00:07 +01:00 committed by GitHub
parent 4b87f38f66
commit 63c7a0e8ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Button } from '../Button';
import { Stack } from '../Layout/Stack/Stack';
import mdx from '../Tooltip/Tooltip.mdx';
import { Tooltip } from './Tooltip';
@ -62,6 +63,23 @@ export const Basic: StoryFn<typeof Tooltip> = ({ content, ...args }) => {
);
};
export const OverflowViewport: StoryFn<typeof Tooltip> = ({}) => {
const content = () => <div>A really long tooltip that will overflow the viewport.</div>;
return (
<Stack justifyContent={'flex-end'}>
<Stack direction="column" alignItems={'flex-end'}>
<Tooltip content="Static string tooltip" placement="bottom">
<Button>Static string tooltip</Button>
</Tooltip>
<Tooltip content={content} placement="bottom">
<Button>Lazy content defined in a function</Button>
</Tooltip>
</Stack>
</Stack>
);
};
Basic.args = {
content: 'This is a tooltip',
theme: 'info',

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

@ -53,6 +53,18 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
onVisibleChange: setControlledVisible,
});
const contentIsFunction = typeof content === 'function';
/**
* If content is a function we need to call popper update function to make sure the tooltip is positioned correctly
* if it's close to the viewport boundary
**/
useEffect(() => {
if (update && contentIsFunction) {
update();
}
}, [visible, update, contentIsFunction]);
const styles = useStyles2(getStyles);
const style = styles[theme ?? 'info'];
@ -91,7 +103,7 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(
<div {...getArrowProps({ className: style.arrow })} />
{typeof content === 'string' && content}
{React.isValidElement(content) && React.cloneElement(content)}
{typeof content === 'function' &&
{contentIsFunction &&
update &&
content({
updatePopperPosition: update,