Skip to content

Long abbreviations span large width and wrong position in the table #6760

@Lexachoc

Description

@Lexachoc

Context

No response

Bug description

When having long abbreviations, the tooltip will span the entire screen (I think it's related to this fix: #4810 (comment) )
However, this is not so easy to read when using the desktop browser or a larger screen.
image

I would expect that the tooltip width to be shorter (normal width but wrapped), I tried to change the --md-tooltip-width by including:

  • stylesheets/extra.css
:root {
  --md-tooltip-width: 20rem !important;
}

But this doesn't work.

I also noticed that the tooltip is rendered in the wrong position when within a table:
image

It is related to #4217

So three expected behaviors:

  1. Tooltips span the entire screen only when the screen size is smaller than the value of --md-tooltip-width.
  2. When screen size larger than the value of --md-tooltip-width, the value of --md-tooltip-width is used as the width of the tooltip div.
  3. If tooltip in tables, the position of the tooltip should be correct and should follow the two behaviors mentioned above.

Chrome: Version 121.0.6167.161
Edge: Version 121.0.2277.112
mkdocs-material version: 9.5.9

Related links

Reproduction

9.5.9-long-abbreviations-issue.zip

Steps to reproduce

  1. unzip
  2. run mkdocs serve in terminal
  3. go to http://localhost:8000/

Browser

No response

Before submitting

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue reports a bugresolvedIssue is resolved, yet unreleased if open

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions