Tooltips with dynamic contents shrink

[emilk]

Simple repro:

let time = ui.input(|i| i.time);
ui.label("Hover for a tooltip with changing content")
    .on_hover_text(format!("A number: {}", time % 10.0));

The tooltips starts out wide, then quickly shrinks, wrapping the text at an unnatural place:

Cause

The first frame, the Area measures the contents and remember it for the next frame.
The next frame it uses this size as the max-width, which means the new text will wrap at this width.

If the text is wider next frame, this means the text will wrap earlier than the default Spacing::tooltip_width, which is already a problem. But it gets worse.

When the text wraps, it usually becomes less wide than the wrap width (because we wrap at word boundaries), so the Area learns that the content is now more narrow, and uses this smaller width as the next wrap-width next frame. The result is a width that just keeps shrinking.

Solution

The general solution is to be found in

• Improve Area sizing with dynamic content #5138

A simple fix is just to add ui.set_max_width(ui.spacing().tooltip_width); to the tooltip:

.on_hover_ui with dynamic content can still hit the shrinking problem. The general solution depends on solving #5138 but a work-around is to add this to your tooltips:

 response.on_hover_ui(|ui| {
+    ui.set_max_width(ui.spacing().tooltip_width);
     // …
 });