Tooltip min-width / max-width

[longzheng]

In the latest version of angular-tooltips, the max-width behavior no longer seems to have an effect.

For very long tooltip content, the tooltip is always locked at the minimum min-width: 100px size.

Current behavior

I've used earlier versions of this library and it used to use absolute positioning to place the tooltip correctly on the page. However in the newer versions, you seem to have switched to a custom <tooltip> element with a position:relative CSS style.

Now the tip element is center positioned using the transform: translateX(50%) trick. Unfortunately the position:relative on the parent has the side effect of the tooltip content no longer having a variable width that will correctly adhere to the max-width layout. It will always try to be scaled as small as possible.

Ideal behavior

Are there any plans to revert the design of this library to its previous behavior so max-width works correctly?

• Removing position: relative on the <tooltip> element
• Using calculated top: XXpx left: XXpx values on the <tip> element from the nearest parent with position: relative

[45kb]

Hi @longzheng we switched to translate because is way lighter and more efficient, no plans to go back to position:absolute it gave much more troubles than this.

Actually the auto width was working on the new version of this module, probably some of the latest commits broke that behavior. Need to investigate it, thanks.

[longzheng]

@45kb Fair enough. If you find the version where it was working (or the commit that broke it), I'd love to apply it locally to my dev!

[45kb]

Yes i will investigate this and tell you as soon aseverything works.
I will let this issue open sorry for closing.

[45kb]

In the meantime (i say this also to anybody who will read in here) just use a custom class if your template is too big, for example tooltip-class="hey" then in your CSS:

tooltip tip.hey {
    min-width: //how much you want;
}

This is not so easy to fix so it could take some time.

[longzheng]

Yeah I spent a few hours trying all sorts of CSS hacks and tweaks to get it to behave correctly but unfortunately I didn't have any luck.

I'm a little skeptical it would have ever worked since I'm pretty sure position: relative on the parent is forcing the child position: absolute to always have the minimum width (instead of the usual behavior of pushing the element as wide as it can be).

[45kb]

Yes it could be, also display:block; sometimes is annoying... problem is that we can't set the tooltip outside of the parent, since it means having to struggle with tons of lines of javascript and usually they never work well the same... i am trying to find a solution for this, if you have any idea i'm listening, thanks

[longzheng]

Besides the solution I proposed initially, you could use JS to first remove the position: relative on the parent, observe the width of the <tip> with the min-max CSS restrictions, store the width and apply it inline, then reapply the position: relative.

The problem with this would be if the content of the <tip> is dynamic, then the inline width would either be static or need to be updated when the content changes as well.

[45kb]

Indeed, going to make such things in javascript will result in many lines of code that will not work perfectly or as expected, the first version main problem was exactly this, that's why we decided to use pure CSS for the new version, and if you look at the code you see it's way lighter, faster and more readable.

I was actually thinking about new attributes like tooltip-min-width and tooltip-max-width but i would love to find a better way, maybe dynamic way at all... and better if it's CSS more than JS :)

[longzheng]

@45kb Any new ideas on this?

[45kb]

Not yet, help is appreciated here