Long abbreviations span large width and wrong position in the table

[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.

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:

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

• Long abbreviations don't wrap to new line in Firefox for Android #4810 (comment)
• Improved tooltips render in wrong position in data tables #4217

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

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting and for the reproduction. This is already fixed in Insiders, as we swapped out the tooltip implementation to implement footnote tooltips and instant previews. Once we've collected a little more feedback on those features, we'll back port the new business logic which should also fix this problem ☺️

[Lexachoc]

@squidfunk Thank you for your quick reply! I'm glad that it is already fixed and the new features is wonderful!

[kamilkrzyskow]

@Lexachoc The extra css:

:root {
  --md-tooltip-width: 20rem !important;
}

isn't enough because by default it won't break words. I provided a temporary makeshift solution in a discussion here: #6757 (reply in thread)

[Lexachoc]

@kamilkrzyskow Thank you! I tried your solution and it works great! Also for the tooltip fontsize CSS hint!
I also found that the default tooltip fontsize a bit small for me. Now it looks better when I set it to font-size: 0.6rem;

For a better look of the tooltip, I modified the CSS (from: #6757 (reply in thread)) to:

.md-tooltip, .md-tooltip--inline {
  max-width: 10rem;
  word-break: break-all;
  white-space: break-spaces;
}

This way there will be no extra spaces on the left and right side if the tooltip is shorter.

Thank you again!

[squidfunk]

Fixed in 599193e – I backported the new tooltip implementation from Insiders in the refactor/tooltip-positioning branch! If you could spare a few minutes and check whether this fixes your issue, we can release it in the next days ☺️ Install with:

pip install git+https://github.com/squidfunk/mkdocs-material.git@refactor/tooltip-positioning

PR: #7045

[Lexachoc]

@squidfunk Thanks for this PR.

I can confirm that the issue has been resolved.

[squidfunk]

Thanks! Keeping open until released.

[squidfunk]

Released as part of 9.5.18.

[oceanclub1970]

Hi all,

I updated to 9.5.18 and the following CSS no longer has any affect on my tooltips - what is the new way to specify the font size, colour etc?

.md-tooltip, .md-tooltip--inline {
    max-width: 15rem;
    word-break: normal;
    white-space: break-spaces;
	font-weight: normal;
}

.md-tooltip__inner,
.md-tooltip--inline .md-tooltip__inner {
	max-width: 15rem;
    font-size: 0.7rem;
	color: blue;
	font-weight: normal;

[Lexachoc]

@oceanclub1970

simply with

[role=tooltip]>.md-tooltip2__inner {
  font-size: 1rem;
}

will do the trick

Result:

[squidfunk]

Thanks @Lexachoc for sharing! Improved tooltips are still experimental, which means we might change the implementation as we discover new problems on the way without considering it a breaking change.

Note that .md-tooltip2* is also a class name/scope that is ephemeral – right now we have two co-existing tooltip implementations that will be consolidated once everything is sorted out. We just needed to solve the bugs quickly, which is why I decided to let them co-exist for a short while. I hope for your understanding – adopting customizations like width and font size will be very easy as @Lexachoc pointed out.