[BUG] Wide tooltips can overflow the window boundaries in version 5

[dylemma]

[BUG] Wide tooltips can overflow the window boundaries in version 5

[gabrieljablonski]

That's good to know. I'm considering adding a section on our documentation covering more clearly (and with examples like this) how to use different middlewares.

Though this isn't a huge issue, since most users are completely fine with just the default behavior, so something to get to eventually.

[gabrieljablonski]

The most "natural" way to do this in V5 would be to use floating-ui's middlewares options to achieve your second suggestion.

have the tooltip ignore its place directive, e.g. if I set place="left" and it doesn't fit on the left or right, have it go to top/bottom if one of those would fit it on screen

As you've pointed out, it already does it for same-axis overflow (left switches to right if no space left, top to bottom, and so on) with the flip() middleware, but it indeed doesn't happen cross-axis (e.g. left to bottom).

This is kind of a weird situation to "fix", since different use-cases would call for different solutions (for example, your "squish" suggestion is totally valid in some cases), but since we already do the left<->right/top<->bottom flip, I don't see why not do this one as well.

See fallbackAxisSideDirection if you're interested in the details (here's also how you'd go about it using the middlewares tooltip prop), but [email protected] offers the cross-axis flip behavior by default.

[dylemma]

Thanks for your reply, this looks very helpful. I'll give this a try and report back (and close the issue) once I figure out what middleware fits my use case.

[gabrieljablonski]

We'll close the issue once #1140 gets merged. Just let us know if it works properly, or if you have other suggestions about this.

[dylemma]

Hm okay. I think I still want the "squish" behavior even with the fallbackAxisSideDirection setting, so I arrived at a hybrid that uses flip() plus size with a minimum width to accomplish a best-fit "squish", then a flip with the fallback axis to have it as a fallback when the best-fit doesn't do the trick. https://codesandbox.io/p/sandbox/react-tooltip-overflow-forked-pjz72c

middlewares={[
  offset(10),
  flip(),
  size({
    apply: ({ availableWidth, availableHeight, elements }) => {
      Object.assign(elements.floating.style, {
        maxWidth: `${Math.max(200, availableWidth - 50)}px`,
      });
    },
  }),
  shift({ padding: 5 }),
  flip({
    fallbackAxisSideDirection: "start",
  }),
]}

(I'm not sure why the -50 in the maxWidth expression was so important. At first, my goal was to set a margin away from the edge of the window, but small values like -10 or even -30 didn't seem to have an effect.)

[gabrieljablonski]

Official release [email protected] fixes this and some other stuff.

[andreimatei]

Some of tooltips are too large to fit on a single line, so I want them wrapped (instead of clipped). @dylemma's snippet helped me, thanks!
I understand that 5.25.1 improved something in the area, but it didn't seem to help with the wrapping. Perhaps that too could be added to the default behavior?