Skip to content
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.

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

Tooltip: Adjust placement of tooltips to avoid overlapping their trigger #37076

Closed
shaunandrews opened this issue Dec 2, 2021 · 2 comments
Closed
Labels
Needs Design Feedback Needs general design feedback. [Package] Components /packages/components

Comments

@shaunandrews
Copy link
Contributor

The tooltip's that show throughout the editor sometimes overlap with the button or element that triggers the tooltip. Here's a few examples:

image

image

image

image

This doesn't seem to be the case for the block toolbar, which gives the tooltip a little more breathing room:

image

I think we should take this same approach everywhere the tooltip is displayed. Here's how it could work adding more space to the above examples:

image

@ramonjd
Copy link
Member

ramonjd commented Dec 2, 2021

Just tooling around with this a bit.

Assuming the position is "bottom", adding this to packages/components/src/tooltip/style.scss has some effect

.components-tooltip {
	margin-top: $grid-unit-15;
}

Screen Shot 2021-12-03 at 7 04 02 am

Screen Shot 2021-12-03 at 7 03 41 am

There would have to be overriding classes for "top" and the other positions probably.

@jordesign
Copy link
Contributor

I'm no longer able to reproduce the issue in the locations mentioned above (or elsewhere) in WP6.5 - tooltips all appear to offer some spacing between the element and the tip. Accordingly I'll close this as unreproducible,

@jordesign jordesign closed this as not planned Won't fix, can't repro, duplicate, stale Aug 18, 2023
WordPress Components automation moved this from Inbox (needs triage) 📬 to Done 🎉 Aug 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. [Package] Components /packages/components
Projects
Development

No branches or pull requests

3 participants