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

[Bug Report][2.5.4] v-tooltip positioning broken if html/body element has margin set #13821

Closed
zoton2 opened this issue Jun 18, 2021 · 2 comments · Fixed by #13823
Closed

[Bug Report][2.5.4] v-tooltip positioning broken if html/body element has margin set #13821

zoton2 opened this issue Jun 18, 2021 · 2 comments · Fixed by #13823
Assignees
Labels
C: VMenu VMenu T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke
Milestone

Comments

@zoton2
Copy link

zoton2 commented Jun 18, 2021

Environment

Vuetify Version: 2.5.4
Last working version: 2.5.1
Vue Version: 2.6.14
Browsers: Chrome 91.0.4472.106
OS: Windows 10

Steps to reproduce

  1. Add a margin to the html or body element.
  2. Add a v-tooltip element (in the Codepen I copy/pasted from the official documentation).
  3. Hover over the element to make the tooltip visible.

Expected Behavior

v-tooltip positioning stays the same.

Actual Behavior

v-tooltip's positioning is off and positioned too far away.

Reproduction Link

https://codepen.io/zoton2/pen/dyvrabZ

Other comments

I know technically Vuetify sets the body to specifically have no margin, so this might be a "won't fix" bug, but it used to work fine hence why I decided to post it. I can work around it in my situation by adding the margin to an element instead of directly to the body, as it works fine in that case.

Someone pointed me towards the PR #13670 which may be the culprit.

@ghost ghost added the triage label Jun 18, 2021
@Tofandel
Copy link
Contributor

Tofandel commented Jun 18, 2021

Hmm something fishy is going on as this was the basic bug it was supposed to fix, and in your template the bug is not present before 2.5.3 (but should have been) but it is after which is weird

I'll need to investigate

@Tofandel
Copy link
Contributor

Tofandel commented Jun 18, 2021

So what I gathered, the tooltip is added to the v-app and not the v-app-wrap which is the one with the relative positioning, so that's why the calculation is incorrect in this case, all the tests of the PR were made with a relatively positioned wrapper around the app, so basically just add position: relative to the .v-application and it'll be good

It's a bug so I'll make a new PR with this fix

@KaelWD KaelWD added C: VMenu VMenu T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke and removed triage labels Jun 19, 2021
@KaelWD KaelWD self-assigned this Jun 19, 2021
@KaelWD KaelWD added this to the v2.5.x milestone Jun 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VMenu VMenu T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants