Increasing font size of Improved tooltips

[oceanclub1970]

Hi all. I've implemented Improved tooltips¶ on my site, but wanted to do two things:

1. Increase the size of the font.
2. If possible, on desktop/wide screens, make the tooltip narrower, as it stretches to the width of the window.

What CSS do I need to add to accomplish this? Thanks,

P.

[kamilkrzyskow]

Hello @oceanclub1970,
to change the size of the font you can do it with:

Note

If you're reading this after April 2024 please see the comment below:

• Increasing font size of Improved tooltips #6757 (comment)

.md-tooltip__inner,
.md-tooltip--inline .md-tooltip__inner {
  font-size: 0.9rem;
}

However, it's position won't be centred to the hovered item, it will be shifted, as the JavaScript calculated the position without using the new font-size.

If possible, on desktop/wide screens, make the tooltip narrower, as it stretches to the width of the window.

I don't know what you mean, the tooltips stretch on the whole page? Can you do a screenshot on the mkdocs-material documentation page and send it here please?

Note that positioning of those tooltips has issues and is being reworked AFAIK: #6488

[oceanclub1970]

Thanks for the reply - see the screencap here to show how the tooltip is the width of the screen:

[kamilkrzyskow]

Oh, now I understand the issue, the amount of text stretches the content width. Didn't realize this was a thing because the title in my opinion should be rather short. The issue is related to the abbreviations and was was reported in: #6760 you can follow that issue. As for limiting the width, for the time being, you can do so with:

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

EDIT: Since the base width is auto, it's better to use max-width, like proposed by Lexachoc. Therefore it won't stretch the tooltip for shorter texts.

[oceanclub1970]

Would you be able to link me to an example extra.css file? For some reason the above CSS excerpt is not working for me.

Also, what is the difference between specifying as:

:root {
  --md-tooltip-width: 10rem;
}

and

.md-tooltip, .md-tooltip--inline {
  max-width: 10rem;
}

[Lexachoc]

Below works for me and it's exactly the same css classes from @kamilkrzyskow solution.

Maybe you need to disable the website cache for the extra.css to work? (I can't say why it doesn't work for you)

/*Temporary solution for community version*/
/*see the new tooltip feature: https://squidfunk.github.io/mkdocs-material/reference/footnotes/#footnote-tooltips*/
.md-tooltip, .md-tooltip--inline {
    max-width: 20rem;
    word-break: break-all;
    white-space: break-spaces;
}

.md-tooltip__inner,
.md-tooltip--inline .md-tooltip__inner {
    font-size: 0.6rem;
}

By default it won't break words, so

:root {
  --md-tooltip-width: 10rem;
}

won't work. See: #6760 (comment)

[danfmaia]

None of the other solutions worked for me here. For me the only thing that actually worked was this:

.md-tooltip2 {
  top: calc(var(--md-tooltip-host-y) - 2rem);
}

.md-tooltip2 > .md-typeset {
  background-color: var(--tooltip-background);
  color: var(--tooltip-color);
  font-family: var(--default-font);
  font-size: var(--main-font-size);
  font-weight: normal;
}

--tooltip-color is a framework variable that i just called, while the remaining three are custom variables declared elsewhere. Btw, this top statement is just to reposition the tooltip.

I know it's not very elegant, but I need to move forward with my project, so it's OK for now.

[kamilkrzyskow]

Right, since April there is a newer tooltip implementation:

• https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/javascripts/components/tooltip2/index.ts

but the previous implementation is still there and is mounted for example in the header 🤔

• https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/javascripts/components/tooltip/index.ts

@squidfunk Is there a reason why both implementations are kept? I guess backwards compatibility, but it's not like the user can choose which one to use. Will the tooltip be replaced with tooltip2 in the next major version?

[squidfunk]

tooltip2 is a quite different implementation that has slightly different requirements that I haven't had time to consolidate. tooltip will be replaced by tooltip2 once I find some time to do so, but as mentioned, were currently working on pretty big things in the background that we'll release later this year. Happy to accept a PR that consolidates both implementations.

Edit: A little more background: the first tooltip implementation came into existence to provide code annotations and then extended to abbreviations (or more general title attributes). Then, we needed tooltips for instant previews, as well as footnote tooltips, and the previous implementation had several problems (see issues) that we needed to fix, which resulted in tooltip2. This new implementation however now doesn't receive an element, but a content observable as a guest, which was necessary to pull off instant previews and footnote tooltips. This needs to be harmonized + the implementation currently still has several redundancies that need to be refactored.