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

Improved tooltips render in wrong position in data tables #4217

Closed
5 tasks done
jonaharagon opened this issue Aug 7, 2022 · 12 comments
Closed
5 tasks done

Improved tooltips render in wrong position in data tables #4217

jonaharagon opened this issue Aug 7, 2022 · 12 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@jonaharagon
Copy link
Sponsor

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

If you enable improved tooltips and add an abbreviation to content inside a data table, the tooltip appears in the wrong location (top left corner of page).

Expected behaviour

Tooltip should appear underneath abbreviation.

Actual behaviour

Screenshot 2022-08-06 at 20 54 07@2x

(This same behavior happens for me on the unmodified mkdocs-material-insiders reference website, but I don't have a nice screenshot handy)

Steps to reproduce

  1. Enable the Improved Tooltips feature.
  2. Add abbreviation to text inside table.

Package versions

  • Python: Python 3.9.13
  • MkDocs: mkdocs, version 1.3.1 from /Users/jonah/.local/share/virtualenvs/mkdocs-material-insiders-4sNm-Ypt/lib/python3.9/site-packages/mkdocs (Python 3.9)
  • Material: Version: 8.3.9+insiders.4.21.0

Configuration

theme:
  features:
    - content.tooltips

System information

  • Operating system: macOS 13.0
  • Browser: Firefox 102.0, and Arc 0.62.0 (Chromium Engine Version 104.0.5112.81)

(Some other users reported this on other operating systems and browsers: privacyguides/privacyguides.org#1510)

@squidfunk
Copy link
Owner

Thanks for reporting. Exact same problem as #3453, which I currently assume to be not fixable. I'll look into it when I find some time, but I don't think there's an easy fix without giving up scrollable tables.

@squidfunk squidfunk added the bug Issue reports a bug label Aug 7, 2022
@jonaharagon
Copy link
Sponsor Author

Got it, thanks!

One solution that comes to mind (for this issue and not the other), would it be possible to disable improved tooltips for hoverable text within data tables? Falling back to the browser's standard tooltips in this specific case would be perfectly fine for us.

Another more complex potential solution (probably also just for tooltips and not annotations) might be to pass the cursor's position to CSS with JS, and use that position to decide where to show the tooltips?

@squidfunk
Copy link
Owner

One solution that comes to mind (for this issue and not the other), would it be possible to disable improved tooltips for hoverable text within data tables? Falling back to the browser's standard tooltips in this specific case would be perfectly fine for us.

As a quick fix yes, but we really need to fix the problem with data tables. I'll provide the fix as soon as I'm back from vacation. Sorry for the temporary inconvenience.

@hrylandvest
Copy link

Just chiming in for a resolution as this is the exact issue I am facing as well.

@squidfunk
Copy link
Owner

Fixed in squidfunk/mkdocs-material-insiders@2b4e34c0d. I've exempted tooltips in table elements from receiving the new styling for now. I'll investigate whether we can fix the problem with absolute positioning of elements in data tables and leave the issue open until then, but if you check out the latest Insiders source, native tooltips should work fine in data tables.

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Aug 18, 2022
@jonaharagon
Copy link
Sponsor Author

I'm not able to get this working, the mispositioned tooltip no longer appears in the upper left, but browser native tooltips don't appear either unless I remove content.tooltips from mkdocs.yml. Hovering over abbr elements simply does nothing.

@squidfunk
Copy link
Owner

@jonaharagon could you please share a short Markdown snippet that reproduces the problem?

@jonaharagon
Copy link
Sponsor Author

Sorry, I figured out what I was doing wrong, it is working 👍

@hrylandvest
Copy link

hrylandvest commented Aug 19, 2022

Not working for me either. Tooltip either shows in upper left like before, or not at all.

Still fairly new to git/github processes though, so not sure I did this correctly. Ran the following to upgrade my local install:

pip install --upgrade git+https://${GH_TOKEN}@github.com/squidfunk/mkdocs-material-insiders.git

My markdown data tables have inline <li></li><br> in cells to achieve multi-line lists of links. The links in the table are actually variables (macros plugin) and call the "link" from a separate yaml file.

@squidfunk
Copy link
Owner

@hrylandvest as already noted, a Markdown snippet that reproduces the error is essential for me to be able to look into the problem.

@squidfunk
Copy link
Owner

Experimental fix in squidfunk/mkdocs-material-insiders@30d747494. The problem is that tables report offsets for their children relative to themselves, even though they are not relatively positioned. This trips up the positioning computation of tooltips. I think we need to handle tables separately and account for this behavior, which I just did in the linked commit.

If this proves to be a viable fix, I'll refactor the logic, but we first need to see whether it fixes all shortcomings. If it turns out to be the right fix, it should also solve or at least help to solve #3453.

Ohne.Titel.mp4

@squidfunk
Copy link
Owner

squidfunk commented Sep 7, 2022

Released as part of 8.4.3+insiders-4.22.1. If the issue persists or new edge cases appear, please reopen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

3 participants