Skip to content

Tooltip: Fix positioning by anchoring to child element #41268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewserong merged 17 commits into from
Jul 19, 2022
Merged

Tooltip: Fix positioning by anchoring to child element #41268

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
feb14f2
ToolTip: Fix positioning by anchoring to child element
andrewserong May 24, 2022
7e7715c
Fix left/right issue
andrewserong May 24, 2022
a52ee64
Switch post schedule and post visiblity to 'bottom right' for consist…
andrewserong May 24, 2022
a546fda
Move left/right transformation to the ToolTip component
andrewserong May 24, 2022
c700826
Switch back to functions, fix tests
andrewserong May 24, 2022
ec06c72
Tidy up
andrewserong May 24, 2022
a57bc9d
Add changelog entry
andrewserong May 24, 2022
338b2aa
Center Tooltip to the appropriate placement point
andrewserong May 25, 2022
c09a8b2
Attempt to simplify the implementation
andrewserong Jul 11, 2022
a0ba72d
Revert change to test
andrewserong Jul 11, 2022
6fc7d73
Revert default back to middle position
andrewserong Jul 12, 2022
5131ea8
Fix error with getDisabledElement
andrewserong Jul 12, 2022
b903d19
Move ref in disabled element to the cloned child element
andrewserong Jul 13, 2022
4f67e5b
Update Storybook example with a small target to better demonstrate po…
andrewserong Jul 13, 2022
9454226
Simplify Tooltip story slightly
andrewserong Jul 13, 2022
90f5541
Consolidate child const for both uses
andrewserong Jul 14, 2022
88f9e6c
Revert previous change, but add a named const for the existing child …
andrewserong Jul 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update Storybook example with a small target to better demonstrate po… 
…sitioning issues
  • Loading branch information
@andrewserong
andrewserong committed Jul 13, 2022
commit 4f67e5bc1a96e7aa46d33bc5cb55d3f3c3ae9850
44 changes: 32 additions & 12 deletions packages/components/src/tooltip/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,42 @@ export const _default = () => {
'bottom right': 'bottom right',
};
const tooltipText = text( 'Text', 'More information' );
const longTooltipText = text( 'Text', 'Long explanatory information' );
const position = select( 'Position', positionOptions, 'top center' );
const delay = number( 'Delay', 700 );
return (
<Tooltip text={ tooltipText } position={ position } delay={ delay }>
<div
style={ {
margin: '50px auto',
width: '200px',
padding: '20px',
textAlign: 'center',
border: '1px solid #ccc',
} }
<>
<Tooltip text={ tooltipText } position={ position } delay={ delay }>
<div
style={ {
margin: '50px auto',
width: '200px',
padding: '20px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Hover for more information
</div>
</Tooltip>
<Tooltip
text={ longTooltipText }
position={ position }
delay={ delay }
>
Hover for more information
</div>
</Tooltip>
<div
style={ {
margin: '50px auto',
width: 'min-content',
padding: '4px',
textAlign: 'center',
border: '1px solid #ccc',
} }
>
Small target
</div>
</Tooltip>
</>
);
};

Expand Down