Tippyjs: Max-width 350px

[richardbushell]

I cannot understand the logic for hard-wiring a 350px max-width? Why is this included?

I had to override it in v3, and now again in v4, but I simply don't understand the logic for including it. When using em's for font-sizes then on larger monitor resolutions then the tooltips simply get truncated mid-word. Why include a hard-wired pixel value at all?

[atomiks]

By default usually you don't want the tooltip to be overly wide. With default browser settings it seems to work fine.

In your case with custom em font sizes then it makes sense to override it with something custom.

[richardbushell]

If you wanted to keep this, wouldn't it make sense to use a relative character based width unit anyway such as em, rather than px? Or even vw?

[atomiks]

Many of the other options (number values) use px since that's what positioning is based on. The CSS uses rem though.

If I were to change the default it would be "22rem" instead

Though I'm wondering what situation would cause text to be cut off at 350px wide, is the font huge? that's long enough for many characters o.O

[richardbushell]

Most web designers tackling responsive layout would change the base rem/em sizing using @media queries depending on the screen size/width. See our example here:-

https://living.video
(just choose Select A Map Area) then TIPPY is used on the subsequent two slides.

If you think a Tooltip should have a default max-width of say 30 chars, then it would make sense to use 30em (i.e. 30 x an uppercase M)

[atomiks]

That's an interesting case since it's valid that the tooltip font size would size proportionally with the screen resolution. I don't think that is very common though on most sites though - usually the font size stays constant regardless of the width of the screen (e.g. GitHub)

I noticed you're doing:

.tippy-tooltip.living-theme {
  max-width: none !important;
}

You can set the default maxWidth like this before initializing tooltips:

// no max-width
tippy.setDefaults({ maxWidth: '' })
// or a value
tippy.setDefaults({ maxWidth: '30em' })

I don't think it's too difficult to override the default behavior so gonna close this one out