Improved tooltips render in wrong position in data tables

[jonaharagon]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

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

(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]

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.

[jonaharagon]

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]

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]

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

[squidfunk]

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.

[jonaharagon]

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]

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

[jonaharagon]

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

[hrylandvest]

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]

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

[squidfunk]

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]

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